nicetext demo site

Nice Text by Sasha aka Alex

Browse components in the storybook, or see them deployed here. Grab this library on npm. For HDR diagnostics outside Storybook iframe constraints, open the dedicated HDR lab page.

We ship text systems that move with intent: time lays the rhythm, your scroll adds momentum, and every loop restarts cleanly for continuous motion.

Pretext-powered canvas layout

Kinetic Typography

One measured text engine, three motion languages: resize morph, continuous wave drift, and line-led pour choreography.

Active mode: morph

Astro + plain TypeScript

Text FX Runtime (Cascade, Scramble, Production Marquee)

Server-rendered Astro markup with direct runtime wiring to `nicetext` APIs.

Cascade entry (interactive replay)

Mirrors Storybook `NiceText/Cascade` behavior with production-safe split markup.

Scramble transition (interactive + time-based)

Slider gives deterministic progress preview; replay runs animated reveal.

Linear marquee (production pattern)

Uses duplicated segment track and WAAPI loop via `animateLinearMarquee`.

nicetext ships signal-driven text animation primitives for production UIs | nicetext ships signal-driven text animation primitives for production UIs |

Speed 26 px/s

Stress fixture

Marquee Throughput Fixture

Runs many simultaneous marquee rows from one animation loop for stress and perf validation.

Rows 36 Base speed 24 px/s fps: -- | frame: -- ms

Build-time ASCII

Image-as-text pipeline (server/build only)

Generated from favicon.svg at build-time with sharp + rgbaToAsciiArt. Runtime only paints precomputed text.

Original

ASCII

                  @@@@@@@@@@@@@@@@
                 @                @
                @ @@@@@@@@@@@@@@@@ @
               @ @@@@@@@@@@@@@@@@@@ @
              @ @@@@@@@@@@@@@@@@@@@@ @
             @ @@@@@@@@@@@@@@@@@@@@@@ @
            @ @@@@@@@@@@@@@@@@@@@@@@@@ @
           @ @@@@@@@@@@@@  @@@@@@@@@@@@ @
          @ @@@@@@@@@@@@ @@ @@@@@@@@@@@@ @
           @@@@@@@@@@@@ @  @ @@@@@@@@@@@@
          @@@@@@@@@@@@ @@@ @@ @@@@@@@@@@@@
        @@@@@@@@@@@@            @@@@@@@@@@@@
        @@        @@@@@@@@@@@@@@@@        @@
          @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
         @        @@@@@@@@@@@@@@@@        @
                        @@@@@@@
                  @@@@@@@@@@   @@@
                          @@@@@

grid: 52x18

React island

Signal chart workbench (storybook-style oscilloscopes)

Same signal families as Storybook, rendered as live chart cards for source, generator, and transformer inspection.

Source input: scroll container

Scroll to drive `createScrollProgressSignal`.

Source input: pressure pad

Press/click to drive `createPointerPressureSignal`.

Signal Sources (from SignalSources stories)

scroll.progress0.000

createScrollProgressSignal

pointer.tilt.x0.000

createPointerTiltSignal

pointer.pressure0.000

createPointerPressureSignal

Signal Generators (from SignalLab stories)

gen.sine0.000

createSineSignalGenerator

gen.sawtooth0.000

createSawtoothSignalGenerator

gen.random0.000

createRandomSignalGenerator

gen.rhythmic0.000

createRhythmicSignalGenerator

Signal Transformers (from SignalLab stories)

tx.add0.000

createAddSignal(sine, saw)

tx.spring0.000

createSpringSignal(add)

tx.scroll.smooth0.000

createDampenSignal(scroll.progress)

tx.scroll.spring0.000

createSpringSignal(scroll.progress)

tx.curve0.000

createBezierCurveSignal(normalized)

tx.logic.xor0.000

createLogicXorSignal(gated)