Intro Animations
First-load choreography. Floating fragments assemble an image, pictures form out of dust, counters, sequential curtains and SVG logo draws hand off to the page.
5 demos · hover a stage to interact · press Replay to re-run
Floating image assembly
Fragments drift at different depths, travel forward, and meet as one seamless image. Choose your own image, then reassemble it.
- depth projection
- image tiles
- soft focus
- canvas
A study in coming together
FORM & FIELD
Every piece. One perspective.
Particle assemble
A picture forming out of dust. Every cell of the dithered image starts thrown out from the centre, transparent and small, then spirals home and fades up on its own delay — so the image resolves out of noise instead of sliding in.
- canvas
- Bayer dither
- spiral converge
- staggered delays
Counter preloader
Counts to 100, then the loader lifts off the page it was covering.
- animate()
- useTransform
- AnimatePresence
Welcome in
The page was ready the whole time — the loader just paced the entrance.
Sequential curtain
Six columns clear the stage one after another, wiping the content in.
- stagger
- transform
- ease-in-out-quart
Studio Ninety
Est. 2019 — Rotterdam
Logo draw
An SVG stroke draws itself with pathLength, handing off to a masked wordmark.
- pathLength
- SVG
- letter stagger