siterealMotion & effects
An animation is an attribute.
data-motion="rise" is the whole of it, and everything else overrides what that name already means. Everything on this page moves with nothing but attributes.
01Reveals
Twelve ways in, and each one has a name.
A reveal is one of these presets, picked in the Effects panel and tuned from there. Hover a tile to watch it arrive.
02Effects
Effects live in the Style panel.
The last folds of Style are what the element does. Seven effects answer three questions — when it arrives (In view, Appear, Scrub), where it sits as you scroll, and what it does under the cursor — and every row opens a sheet of its own.
data-motion="rise"data-scroll-speed="0.3".card:hover03Springs
A spring is three numbers and a solver.
Stiffness, damping and mass, sampled into a real CSS linear() easing — so the page needs no physics engine, and the curve survives being pasted into a stylesheet. Its duration is a result, not a setting.
data-motion-spring="220 12 1"04Scroll links
Scroll links are positions, not animations.
data-scroll-speed says where an element sits given where the page is. It writes transform while a reveal writes the individual properties, so one element can carry both.
Hover and press are rules you can read.
&:hover { translate: 0 -6px; }&:active { scale: 0.96; }They show up in the CSS tab and work with JavaScript off — which is the whole reason they are a rule and not a runtime.
Start building the sites you’ve always wanted.
Seven days free, on your machine — and every site you build is real Astro in your own repository, yours from the first save.