effect
Paper effect
A sheet of dots behind a hero. It reacts to the cursor, buttons and clicks, can sketch components on itself, and never moves on its own.
When to use
- Behind the home hero, and only there. It's the site's signature, and using it twice waters it down.
When not to use
- Behind dense content or forms. At small sizes the dots fight with the text.
Behaviour
The dots only ever react, through the lens, the ripple and the pen described in the parts. They never animate on their own. Everything snaps to the 16px grid. When nothing happens it's one still frame, and it only runs while the hero is on screen.
Accessibility
- Decorative: the canvas is
aria-hidden="true"and never takes focus. - Motion: with
prefers-reduced-motionyou get the still sheet, and none of the movement.
Where it's used
- runceanu.com
src/components/HeroBackdrop.jsx
Values
Straight from the contract. Each value sits next to its token, because six tokens here all come out as #3a3a3a and the colour alone can't tell you which one is right.
Never changes
| Part | Property | Value | Token |
|---|---|---|---|
| sheet | pitch | 16px | spacing/gap/medium |
| sheet | dot-opacity | 0.16 | opacity/soft |
| sheet | background | #060805 | non-interactive/background/primary |
| dot | radius | 1px | on purpose: Tuned to the 16px grid. Nothing else would use it. |
| lens | radius | 210px | on purpose: Tuned by eye for how the lens moves. Only the paper uses it. |
| lens | push | 9px | on purpose: Tuned by eye for how the lens moves. Only the paper uses it. |
| lens | accent | #00d669 | actions/primary/default/background |
| lens | cursor | radius 210px, power 1.0 | on purpose: Tuned by eye: how wide the lens is, and how fast it fades. Only the paper uses it. |
| lens | halo | radius 240px, power 1.3 | on purpose: Tuned by eye: how wide the lens is, and how fast it fades. Only the paper uses it. |
| lens | press | radius 330px, power 1.7 | on purpose: Tuned by eye: how wide the lens is, and how fast it fades. Only the paper uses it. |
| pen | ink-opacity | 0.32 | opacity/mild |
| pen | stroke-width | 2px | spacing/outline/medium |
| pen | cadence | 2s between sketches, each one 3.2s from first line to gone | on purpose: How often the pen draws. There are no motion tokens yet. |