Interaction

Click, Play, Enter or Space starts an upward character reveal, followed by a fade in place. Reset below the clipping masks only after the text is invisible, then repeat according to the loop setting. Pause and resume either phase without resetting. The toolbar follows this reveal-and-fade cycle on both comparison sides.

States

[data-part="char0"] / y: 105% → 0%; [data-part="char1"] / y: 105% → 0%; [data-part="char2"] / y: 105% → 0%; [data-part="char3"] / y: 105% → 0%; [data-part="char4"] / y: 105% → 0%; [data-part="char5"] / y: 105% → 0%; [data-part="char6"] / y: 105% → 0%; [data-part="char7"] / y: 105% → 0%; [data-part="char8"] / y: 105% → 0%; [data-part="root"] / x: 0 → 0; [data-part="root"] / y: 0 → 0; [data-part="root"] / scale: 1 → 1; [data-part="root"] / opacity: 1 → 1.

Timing

Reveal 1160 ms after a 0 ms delay; cubic-bezier(0.22, 1, 0.36, 1). Fade in place over 406 ms with gentle ease-in-out. Full cycle 1566 ms.

Enter and exit

Reveal characters upward in a stagger. Keep them at their final positions and fade opacity to zero over 35% of the reveal duration; reset below the masks only while invisible. Never move the visible text back down. Repeat the full reveal-and-fade cycle.

Repeated input and interruption

A new demonstration resets while invisible. Pause holds the current character positions, opacity and phase progress; Play resumes the same phase. Never reverse the letter Y tracks.

Reduced motion

Follow prefers-reduced-motion: skip delay, loops and animation and show the target state immediately. Preview speed is observation state and is never saved in the configuration.

Default configuration

These values come from the maintained default configuration. Editor drafts and exported changes can differ.

{
  "schemaVersion": 2,
  "recipeId": "text-rise",
  "durationMs": 1160,
  "delayMs": 0,
  "easing": [
    0.22,
    1,
    0.36,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": true,
  "interruption": "retarget",
  "tracks": [
    {
      "part": "char0",
      "property": "y",
      "values": [
        "105%",
        "0%"
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 0.7724137931034483
    },
    {
      "part": "char1",
      "property": "y",
      "values": [
        "105%",
        "0%"
      ],
      "times": [
        0,
        1
      ],
      "start": 0.028448275862068967,
      "span": 0.7724137931034483
    },
    {
      "part": "char2",
      "property": "y",
      "values": [
        "105%",
        "0%"
      ],
      "times": [
        0,
        1
      ],
      "start": 0.056896551724137934,
      "span": 0.7724137931034483
    },
    {
      "part": "char3",
      "property": "y",
      "values": [
        "105%",
        "0%"
      ],
      "times": [
        0,
        1
      ],
      "start": 0.0853448275862069,
      "span": 0.7724137931034483
    },
    {
      "part": "char4",
      "property": "y",
      "values": [
        "105%",
        "0%"
      ],
      "times": [
        0,
        1
      ],
      "start": 0.11379310344827587,
      "span": 0.7724137931034483
    },
    {
      "part": "char5",
      "property": "y",
      "values": [
        "105%",
        "0%"
      ],
      "times": [
        0,
        1
      ],
      "start": 0.14224137931034483,
      "span": 0.7724137931034483
    },
    {
      "part": "char6",
      "property": "y",
      "values": [
        "105%",
        "0%"
      ],
      "times": [
        0,
        1
      ],
      "start": 0.1706896551724138,
      "span": 0.7724137931034483
    },
    {
      "part": "char7",
      "property": "y",
      "values": [
        "105%",
        "0%"
      ],
      "times": [
        0,
        1
      ],
      "start": 0.19913793103448277,
      "span": 0.7724137931034483
    },
    {
      "part": "char8",
      "property": "y",
      "values": [
        "105%",
        "0%"
      ],
      "times": [
        0,
        1
      ],
      "start": 0.22758620689655173,
      "span": 0.7724137931034483
    }
  ]
}

Source code and reuse

The corresponding GitHub example contains the public renderer, default configuration and runnable entry point. Read the interaction notes and preserve the included third-party and font notices when reusing it. The complete website editor is maintained separately.

Using it in your own project

Open the editor to run the actual preview and compare changes. This document does not run a separate imitation. Recheck content, input, focus and layout after integrating an export.

Catalog provenance label: Personal website. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.