Overscan text

The line vocabulary moves a mask across the text; this one makes the units arrive. Each character is delayed by --ov-char, its own index. Two traps it has to avoid: splitting a string into spans breaks its accessible name, so the real string is kept in a clipped copy rather than one hidden with visibility or display, both of which remove it from the tree and are how react-bits ended up announcing nothing. And splitting by character is not splitting by glyph, so the split is by grapheme and Thai keeps its marks on their bases. Reload to replay.

demo/text.html, from this page

import 'overscan'
import 'overscan/overscan.css'

<ov-text
  effect="cascade"
  text="REACTOR ONLINE"
></ov-text>

import { OvText } from 'overscan/react'

<OvText
  effect="cascade"
  text="REACTOR ONLINE"
/>

import { OvText } from 'overscan/vue'

<OvText
  effect="cascade"
  text="REACTOR ONLINE"
/>

import OvText from 'overscan/svelte/OvText.svelte'

<OvText
  effect="cascade"
  text="REACTOR ONLINE"
/>

terminal

cascade

units arrive one at a time, delayed by --ov-char

decode

scrambles, then settles left to right on the real character

jitter

perpetual, and first to go under reduced motion

cascade

Thai. split by grapheme, so the marks stay on their base

variation: effect="decode" text="SECTOR 4 NOMINAL"

import 'overscan'
import 'overscan/overscan.css'

<ov-text
  effect="decode"
  text="SECTOR 4 NOMINAL"
></ov-text>

import { OvText } from 'overscan/react'

<OvText
  effect="decode"
  text="SECTOR 4 NOMINAL"
/>

import { OvText } from 'overscan/vue'

<OvText
  effect="decode"
  text="SECTOR 4 NOMINAL"
/>

import OvText from 'overscan/svelte/OvText.svelte'

<OvText
  effect="decode"
  text="SECTOR 4 NOMINAL"
/>

industrial

cascade

units arrive one at a time, delayed by --ov-char

decode

scrambles, then settles left to right on the real character

jitter

perpetual, and first to go under reduced motion

cascade

Thai. split by grapheme, so the marks stay on their base

variation: effect="jitter" text="PRESSURE LOSS"

import 'overscan'
import 'overscan/overscan.css'

<ov-text
  effect="jitter"
  text="PRESSURE LOSS"
></ov-text>

import { OvText } from 'overscan/react'

<OvText
  effect="jitter"
  text="PRESSURE LOSS"
/>

import { OvText } from 'overscan/vue'

<OvText
  effect="jitter"
  text="PRESSURE LOSS"
/>

import OvText from 'overscan/svelte/OvText.svelte'

<OvText
  effect="jitter"
  text="PRESSURE LOSS"
/>

cyber

cascade

units arrive one at a time, delayed by --ov-char

decode

scrambles, then settles left to right on the real character

jitter

perpetual, and first to go under reduced motion

cascade

Thai. split by grapheme, so the marks stay on their base

variation: text="เขต 4 ปกติ"

import 'overscan'
import 'overscan/overscan.css'

<ov-text
  effect="cascade"
  text="เขต 4 ปกติ"
></ov-text>

import { OvText } from 'overscan/react'

<OvText
  effect="cascade"
  text="เขต 4 ปกติ"
/>

import { OvText } from 'overscan/vue'

<OvText
  effect="cascade"
  text="เขต 4 ปกติ"
/>

import OvText from 'overscan/svelte/OvText.svelte'

<OvText
  effect="cascade"
  text="เขต 4 ปกติ"
/>

antiseptic

cascade

units arrive one at a time, delayed by --ov-char

decode

scrambles, then settles left to right on the real character

jitter

perpetual, and first to go under reduced motion

cascade

Thai. split by grapheme, so the marks stay on their base

esper

cascade

units arrive one at a time, delayed by --ov-char

decode

scrambles, then settles left to right on the real character

jitter

perpetual, and first to go under reduced motion

cascade

Thai. split by grapheme, so the marks stay on their base

neo

cascade

units arrive one at a time, delayed by --ov-char

decode

scrambles, then settles left to right on the real character

jitter

perpetual, and first to go under reduced motion

cascade

Thai. split by grapheme, so the marks stay on their base

machina

cascade

units arrive one at a time, delayed by --ov-char

decode

scrambles, then settles left to right on the real character

jitter

perpetual, and first to go under reduced motion

cascade

Thai. split by grapheme, so the marks stay on their base

holo

cascade

units arrive one at a time, delayed by --ov-char

decode

scrambles, then settles left to right on the real character

jitter

perpetual, and first to go under reduced motion

cascade

Thai. split by grapheme, so the marks stay on their base

aegis

cascade

units arrive one at a time, delayed by --ov-char

decode

scrambles, then settles left to right on the real character

jitter

perpetual, and first to go under reduced motion

cascade

Thai. split by grapheme, so the marks stay on their base

vector

cascade

units arrive one at a time, delayed by --ov-char

decode

scrambles, then settles left to right on the real character

jitter

perpetual, and first to go under reduced motion

cascade

Thai. split by grapheme, so the marks stay on their base