Lerp

The Design System Guide

Visitthedesignsystem.guide

Free previewPro opens every clip, exact specs and prompts.

Get Pro →
Scroll · 1440 px · 6 s · 30 fps
Step frames · Pro

Full page · Pro

MotionFramer 30 fps
Specs

The motion

The Design System Guide is known for Motion scroll. Measured from frames; estimates from notes. Each fit includes its error.

Prompt

Prompt pack

The site presents a dark, high-contrast interface defined by glossy, multi-coloured geometric shapes that resemble UI components. These vibrant elements float against a near-black background, creating a playful yet technical mood. The headline text is encapsulated in pale blue rounded chips, giving the typography a tactile, button-like quality. Subtle ambient animations, such as bobbing shapes and drifting sparkles, add life to the static layout without overwhelming the content. The overall aesthetic feels modern and polished, balancing heavy graphical elements with clean, structured information architecture.

5 prompts in Pro Generated 25 Sep 2026

  • Recreate this site's feelEverything: look, layout, type, colour, motion and libraries, in one prompt.
  • Just the scroll feelSmoothing, what moves with scroll, pinned sections.
  • Just the introHow the page enters: sequence, curve, duration, stagger.
  • Just the hoversLinks, buttons and cursor: timings from the live CSS.
  • Just the type and colourFamilies, scale, weights, tracking and the palette with roles.

Pro opens every prompt with its measured values, and the tokens they are built from.

Unlock prompts with Pro

US$60/year or US$8/month. Cancel anytime.

Record

Capture record

Savedon 24 Sep 2026. Full pages, stills and key frames.

Pro opens the rest of the record: the whole page at each viewport, the key frames of every clip. See Pro

Captured

  1. 24 Sep 2026 Shown home · 1440 px · home · 390 px · key pages · 1440 px · key pages · 390 px
Notes

The Design System Guide (thedesignsystem.guide): Motion scroll.

dark · 6 effects · 1 measured · 30 fps clips

Motion
Intro, Scroll, Hover, Page transition, Ambient
Libraries
Motion, Framer
Footage
1 clip, frame-stepped 30 fps
Captured
24 Sep 2026

near-black page with "Build better / design systems" set so each line sits in its own pale-blue rounded chip, above a row of glossy gradient "UI building block" shapes (a toggle, a skeleton card, arches, stairs, spheres) that bob at rest.

Libraries detected

Stack as observed

Framer (generator Framer ea22747); motion: Framer Motion appear and loop animations (WAAPI), native scroll (a wheel jumps at once; bundle contains Lenis but no smoothing is applied), bundle contains a Spline embed module (no canvas on the home page).

Techniques

Techniques on this site

Each one taught on its own page: a live demo you can tune, how it works, and the code. Infinite marquee.

More like this

Similar motion and feel.

91 % alike
91 % alike
90 % alike
88 % alike
86 % alike
86 % alike