Hand-drawn
Paper stack on scroll
Scrolling as a stack of sheets: every section slides up at a slight tilt and settles flat as if laid on a desk; a pencil thread runs along the edge, drawing itself as you scroll and tying a knot at each sheet. Margins carry doodles, a pair per sheet, drawn in when the thread reaches the section. Any sections inside.
What you can change
- labels at the knots, doodles — icon pairs per sheet from the set of 14, thread — the thread can be turned off
- accent and ink, rough and boil, tone
- sections inside — any blocks
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.ru/c/sketch-018?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
For developers
The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.
Technical notes
One file, zero dependencies, “use client”. A wrapper around sections: each direct child is wrapped into a sheet tilted from the seed (sign alternates). A sheet slides in once: IntersectionObserver sets data-shown, transition transform/opacity 0.9s; a sheet already on screen at load shows at once. The thread is an SVG on a 4.5rem rail on the left (from 64rem width only): a vertical sketch line in three boil frames, pathLength=1, stroke-dashoffset = 1 − progress; progress is computed on rAF from scroll/resize/ResizeObserver as the share of the block past the 55% screen mark. Knots are dots at the top of each sheet, popping when the thread reaches them; labels caption the knots vertically. Fonts via <link precedence>, palette --vibeui-sketch-018-* with light-dark, reduced-motion shows everything at once. Doodles: a pair of names per sheet from film, frame, coffee, clock, glasses, lens, heart, chat, coin, tag, phone, calendar, star, camera — strokes in a 48×48 box with the same sketch, the left one at the knot, the right one mirrored on the right rail (shown together with the left from 64rem); strokes draw in one by one (pathLength, dashoffset delayed by --k×120ms) once progress reaches the knot.
Tags
- sketch
- hand-drawn
- handwritten
- doodle
- rough
- boil
- scroll
- reveal
- transition
- page
- wrapper
- layout
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…