Skip to content
SloplessTry the picker

Signature look · kinetic-type

Text scramble

Short labels and the hero eyebrow decode from random glyphs into their final text, once, as they enter the viewport; links scramble briefly on hover. Terminal and tech flavoured.

Id
text-scramble
Cost
about 31 KB of JavaScript (gzipped), counted against the design's performance budget
Stacks
Next.js, Astro, SvelteKit, Plain HTML
Motion
Respect prefers-reduced-motion with a static fallback (shown below)

What the agent must do

  • Apply the scramble only to short strings (eyebrows, labels, nav links, stats; under 40 characters), never to headlines longer than five words or body copy.
  • Use GSAP's ScrambleTextPlugin with the style's character set (mono styles: upper-case and digits), duration 0.6–1 s, revealing left to right, once per element.
  • Keep the final text in the HTML and set aria-label to it so screen readers never read the random glyphs; trigger with IntersectionObserver.
  • Under prefers-reduced-motion, skip the plugin entirely and show the final text.
  • Load GSAP and the plugin after first paint; if the page already ships GSAP for another look, reuse it.

Required skills (the agent asks before installing, per project)

gsap-core
Official GSAP core API: tweens, easing, stagger, matchMedia for prefers-reduced-motion. Source: greensock/gsap-skills, reviewed 2026-10-24 at 96c4b013173f.
npx skills add greensock/gsap-skills#96c4b013173fa9b01c059b036abc4d266a58c476 --skill gsap-core
gsap-plugins
Official GSAP plugins: SplitText, ScrambleText, Flip, Observer, ScrollSmoother. Used by kinetic type and text scramble. Source: greensock/gsap-skills, reviewed 2026-10-24 at 5b909b9d9475.
npx skills add greensock/gsap-skills#5b909b9d9475884aedbca35375d12f963df4e898 --skill gsap-plugins

Running demo, in Bento Tech

The preview renderer's stand-in for this look on the hero of a Bento Tech design. It shows where the look lives and how much of the screen it takes; the real effect is built with the skills above.

Full reference renderTry it in the picker

Northfold
  • About
  • Contact
Read case studiesStart a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Corvid Robotics — identity

06

Booking projects from June 2026

Strategy and design for companies that make things

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Corvid Robotics

Fieldstack

Tidewater Labs

Arklow Valves

Mosswood Bio

Desktop
Northfold
  • About
  • Contact
Start a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Corvid Robotics — identity

06

Booking projects from June 2026

Strategy and design for companies that make things

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Phone

Reduced-motion fallback

What visitors with prefers-reduced-motion: reduce must get: the same layout, no movement.

Northfold
  • About
  • Contact
Read case studiesStart a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Corvid Robotics — identity

06

Booking projects from June 2026

Strategy and design for companies that make things

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Corvid Robotics

Fieldstack

Tidewater Labs

Arklow Valves

Mosswood Bio

Desktop, prefers-reduced-motion: reduce
Northfold
  • About
  • Contact
Start a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Corvid Robotics — identity

06

Booking projects from June 2026

Strategy and design for companies that make things

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Phone, reduced motion

Styles it suits

Bento TechBroadsheet NewspaperBrutalistConstructivistNeo-BrutalismNeo-grotesk MinimalRisograph PrintSwiss InternationalSynthwave Retro-FutureTerminal Mono