Skip to the content

Every effect. Ready to ship.

Every card is a recording of the real component. Hover one to see it play, open it for the demo, the spec and the full code.

Open the spec Liquid hover, the effect at rest

Liquid hover

New Cursor Animations

Pictures turn liquid under the pointer, and settle again in about a second.

Open the spec Word loop, the effect at rest

Word loop

New Text Animations

One word of a heading cycles through a list, letter by letter, in a slot that changes width with it.

Open the spec Rolling stats, the effect at rest

Rolling stats

New Scroll

Key figures roll digit by digit as they scroll in, land left to right, then a rule and the unit follow.

Open the spec Footer reveal, the effect at rest

Footer reveal

New Scroll

The page lifts like a sheet and uncovers the footer lying under it,

Open the spec Clip reveal, the effect at rest

Clip reveal

New Scroll

Pictures open from one edge as they come into view, a thin accent rule

Open the spec Ring carousel, the effect at rest

Ring carousel

New Scroll

Cards standing on a ring seen from a little above; the hand spins it, it runs on with its momentum and docks on a card.

Open the spec Greeting loader, the effect at rest

Greeting loader

New Page Transitions

Greetings run through a panel of ink, the last one flies to the headline

Open the spec Glyph transition, the effect at rest

Glyph transition

New Page Transitions

A grid of mono glyphs covers the page from the click, names the next

Open the spec Glyph reveal, the effect at rest

Glyph reveal

New Scroll

A picture arrives as ASCII, then a front turns every glyph into the real picture.

Open the spec Drag canvas, the effect at rest

Drag canvas

New Cursor Animations

An endless wall of cards the hand drags in every direction, thrown,

Open the spec Zoom through, the effect at rest

Zoom through

New Scroll

A pinned word grows with the scroll until one letter fills the window,

Open the spec Elastic line, the effect at rest

Elastic line

New Cursor Animations

The rules of a page behave like strings. The pointer pulls one, it

Open the spec Panel accordion, the effect at rest

Panel accordion

New Navigation

A row of tall picture panels. The one under the pointer opens wide, the

Open the spec Compare slider, the effect at rest

Compare slider

New Cursor Animations

Two pictures in one frame, split by a rule that follows the pointer on a spring.

Open the spec Card fan, the effect at rest

Card fan

New Cursor Animations

A pile of cards fans out into an arc under the pointer, and the card

Open the spec Depth tilt, the effect at rest

Depth tilt

New Cursor Animations

A card turns toward the cursor in perspective, its layers slide apart in

Open the spec Pill nav, the effect at rest

Pill nav

New Navigation

One pill travels from link to link on a spring, and the text it covers

Open the spec Dot repel, the effect at rest

Dot repel

New Cursor Animations

A halftone screen of fine dots behind the hero, parted by the cursor and sprung back.

Open the spec Drag slider, the effect at rest

Drag slider

New Scroll

A row of cards the hand grabs and throws; it glides on with its momentum, gives like rubber at the ends, then comes to rest.

Open the spec Split-flap, the effect at rest

Split-flap

New Text Animations

A heading lands like a departures sign, each character turning through its flaps to the right one.

Open the spec Cursor label, the effect at rest

Cursor label

New Cursor Animations

Over a labelled element, a pill with its word follows the cursor, View on a project, Play on a film.

Open the spec Line reveal, the effect at rest

Line reveal

New Text Animations

Each line of a heading rises from its own mask as the heading scrolls into view.

Open the spec Pinned gallery, the effect at rest

Pinned gallery

New Scroll

The section holds still while its cards run sideways with the scroll, each picture a little slower than its card.

Open the spec Pixel ribbon, the effect at rest

Pixel ribbon

New Cursor Animations

A ribbon of pixels trails the cursor on springs, then folds back into its head.

Open the spec Pixel wake, the effect at rest

Pixel wake

New Cursor Animations

Squares open under the cursor with a flash of colour, then close behind it

Open the spec Hover list, the effect at rest

Hover list

New Cursor Animations

A picture follows the pointer over a list of rows, leans with its speed,

Open the spec Preloader, the effect at rest

Preloader

New Page Transitions

A full screen counter rolls up to 100, then lifts off the page panel by panel.

Open the set Button set, the effect at rest

Button set

New 07 Buttons

Seven hover animations for the buttons of a page, one attribute to pick them.

Open the spec Ink reveal, the effect at rest

Ink reveal

New Text Animations

A pale block of text that takes its ink, word by word, as the page scrolls.

Open the spec Velocity marquee, the effect at rest

Velocity marquee

New Scroll

A ribbon that runs on its own, and speeds up or turns back with the scroll.

Open the spec Stack cards, the effect at rest

Stack cards

New Scroll

Full width cards that stack on top of one another as the page scrolls.

Open the spec Gravity footer, the effect at rest

Gravity footer

New Navigation

Objects drop into the footer, pile up, and can be picked up and thrown.

Open the spec Text scramble, the effect at rest

Text scramble

Text Animations

Text shuffles through glyphs and settles back into its words, letter by letter.

Open the spec Pixel swap, the effect at rest

Pixel swap

Cursor Animations

The cursor opens a pixel trail onto a second image, and each square closes again.

Open the spec X-ray lens, the effect at rest

X-ray lens

Cursor Animations

A window follows the pointer and shows what lies under the page inside it.

Open the spec Pixel sweep reveal, the effect at rest

Pixel sweep reveal

Text Animations

Headings and paragraphs write themselves in, pixel block by pixel block.

Open the spec Pixel image trail, the effect at rest

Pixel image trail

Cursor Animations

Images settle along the path of the cursor, then leave again.

Open the spec Fullscreen curtain menu, the effect at rest

Fullscreen curtain menu

Navigation

A fullscreen menu that falls like a curtain from a burger, with a terminal layer.

Open the spec Anchored expandable menu, the effect at rest

Anchored expandable menu

Navigation

A small frosted bar anchored at the top, that opens into the full navigation.