Appearance catalogue
Scroll to meet each effect. Replay it, slow it down, and look at the recipe. The site owns the motion; in-view supplies the trigger.
Each scroll trigger runs once. Replay controls belong to this page. Your system's reduced-motion preference always takes priority.
Opacity and a short upward movement. Use it for a content block, an introduction, or a card.
An entrance should guide the eye, then get out of the way.
A local duration and distance, with a negative bottom margin to trigger farther inside the viewport. Initially visible content stays visible.
A little more travel, a little more time.
Without the runtime, Reveal plays on first render. With data-enhance="in-view", off-screen content waits for its first entry. Reveal reference
The container is observed once. Its direct children carry the animation, with a small delay between neighbors. No JavaScript timers or tokens on individual items.
Wait outside the viewport.
Remove the pending state.
Let CSS handle the entrance.
Leave the content at rest.
The delay is capped at eight steps. Browsers without sibling-index() reveal the group together. A group is one trigger, even when its cards wrap to several rows.
Use <mark> when the phrase is relevant in its context. The background grows while the text stays readable.
Build fewer things.
Make each one count.
Intent classes tint the highlight. An ordinary span keeps a decorative highlight separate from mark semantics.
A clear idea, a key detail.
هذه فكرة مهمة
The highlight follows the phrase as it wraps, and the sweep runs through it in reading order, one line after the next.
Good interfaces do not shout. They point at the one sentence that matters and let the rest of the page breathe around it. Then they step aside.
A highlight far down the page waits for its first appearance, so the reader still sees it sweep in on arrival.
Keep scrolling ↓
You made it this far. This highlight waited for you.
Without JavaScript, the full highlight is already visible. Forced colors uses the system highlight pair. Mark sweep reference
These transitions are defined in this page, outside the library. A visible base state and a .is-pending starting state are the entire connection to in-view.
A site-defined translation and fade. The runtime knows nothing about the direction or the curve.
Your class. Your timing. The same scroll trigger.
Scale and opacity instead of travel. The base state stays readable without the runtime or when motion is reduced.
A small scale change can be enough.