Effects

A calmer way to make interfaces feel alive.

Cursor, motion, text and scroll effects with a native, keyboard-safe fallback built in. Move through the page on a desktop pointer, then try the same content with reduced motion enabled.

Explore effects

Jump to scroll stories Explore experience-level UI →Browse all 35 effects →

Cursor layer

A page gets one signature cursor. Switch the active layer rather than stacking them — running several at once is the most common way these effects turn into noise.

01 · Cursor

The pointer can have a vocabulary.

Project index

Focus, not friction.

The follower is decorative. The links, labels and focus ring underneath are the interaction.

Soft Matter ↗

Quiet Systems ↗

Open Forms ↗

Cursor Text

Spotlight

Trail

Magnetic Target

Image trail

Sweep through the archive.

Preview + lens

Media arrives when it helps.

Case study 01

Case study 02

Case study 03

Liquid Cursor is available as a standalone layer.

02 · Motion

Entrance is a rhythm, not a gate.

Blur Reveal

Sharp content, soft arrival.

The blur stays low enough that the message is never withheld.

Spring Reveal · Blur preset

A small physical settle.

The same readable entrance with a spring settle; use Blur Reveal when the spring itself is not the point.

Mask Reveal

Useful for editorial images and hero surfaces.

One considered step

Then a second

Then the whole shape

Liquid Loader

02A · Surfaces

The edge, face and depth can answer together.

Content Swap Motion

Arrival

03 · Text

Typography can move without losing its voice.

Word Stagger · Split Text preset

Character Stagger · Split Text preset

Hover Text

View project

Scramble:

Kinetic Underline

Read the note →

04 · Scroll

Scroll can carry a story without taking the wheel.

Parallax Section

Depth in a few pixels.

The content stays readable while the layers move just enough to suggest space.

Listen

Start with the quiet signal.

Shape

Give the response a human scale.

Release

Let the interface get out of the way.

Browse all · 35 effects

The full set of effects, easy to reach.

Live studies stay above. This compact catalogue keeps the full family visible, with canonical patterns first and quieter variations kept in context.

name / relationship / detail

cursor

12 entries

Cursor Blend
A mix-blend-mode:difference circle that inverts against whatever it crosses.
Open detail
Cursor Blob
A slow ambient blob behind the page content.
Open detail
Cursor Spotlight
A subtle region-level light following the pointer.
Open detail
Cursor Text
A contextual label for a meaningful target.
Open detail
Cursor Trail
A capped, short-lived trail of dots or bubbles.
Open detail
Hover Image Preview
A floating preview for a focused list row.
Open detail
Image Trail
Images that appear during a fast pointer sweep.
Open detail
Lens Cursor
A small local magnifier for media.
Open detail
Link Preview
A floating thumbnail-and-summary card for a hovered or focused link.
Open detail
Liquid Cursor
A velocity-aware squash-and-stretch follower.
Open detail
Magnetic Cursor Target
Composition of Magnetic and CursorTarget.
Open detail
Soft Cursor
A small core and spring-lagging follower.
Open detail

motion

12 entries

Blur RevealCanonical
A low-blur, low-travel in-view entrance.
Open detail
Mask RevealCanonical
A directional clipping reveal.
Open detail
Border Travel
One restrained border segment travels along the nearest edge.
Open detail
Content Swap Motion
Keyed content changes hand off with directional clipping and travel.
Open detail
Depth Shift
A small group of planes separates as one surface responds to proximity.
Open detail
Edge Highlight
A local hairline responds to the side nearest the pointer.
Open detail
Liquid Loader
A small accessible loading/progress indicator.
Open detail
Sibling Dim
Hovering or focusing one item in a group fades the rest back.
Open detail
Stagger Reveal
A parent-driven sequence for child content.
Open detail
Surface Compression
A tactile press compresses elevation and inset depth.
Open detail
Image Reveal Variation of Mask Reveal
A media-specific mask, scale and focus preset of Mask Reveal.
Open detail
Spring Reveal Variation of Blur Reveal
A generic spring entrance preset for Blur Reveal's in-view reading pattern.
Open detail

text

6 entries

Split Text RevealCanonical
Stable word, character or line entrance. The canonical text reveal — Word Stagger and Character Stagger are its presets.
Open detail
Hover Text Reveal
A focused alternate label transition.
Open detail
Kinetic Underline
A small hover and focus underline motion.
Open detail
Text Scramble
A brief decorative decode effect.
Open detail
Character Stagger Variation of Split Text Reveal
Preset of Split Text Reveal: `by="character"`. No additional behaviour.
Open detail
Word Stagger Variation of Split Text Reveal
Preset of Split Text Reveal: `by="word"`. No additional behaviour.
Open detail

scroll

5 entries

Horizontal Story
Conservative vertical-to-horizontal panels.
Open detail
Parallax Section
Restrained section-level scroll depth.
Open detail
Scroll Progress
Page or container reading progress.
Open detail
Scroll Reveal
A shared-observer viewport entrance.
Open detail
Sticky Story
A sticky visual with normal-flow story steps.
Open detail