Preloader

Install

Props

What It Demonstrates

Loop

An animation that repeats, a set number of times or infinitely.

Number ticker

Digits rolling or counting up to a value.

Fade in / Fade out

Element appears or disappears by changing opacity.

Easing

The rate at which an animation speeds up or slows down.

Perceived performance

The right animation makes an interface feel faster, even when it isn't.

Related Components

• Refract

  A frosted-glass slab you drag across a live scene, refracting it through a real shader optic. A rounded-rect height field bends three separately-sampled color channels along its gradient, with a Fresnel-bright rim, a travelling specular streak, and a frost that is a genuine multi-tap blur of what sits beneath the pane. Where Lens bends its DOM children through an SVG displacement map and magnifies, Refract is a flat pane over a scene texture with true angle-of-incidence refraction, dispersion and glare, and the scene it bends is drawn in the same shader, because no browser lets WebGL read the rendered page. Throw it and it glides on momentum, rubber-banding off the container walls.

• Intro AnimationPro

  A wind front sweeps the wordmark right to left. The instant it reaches a glyph the text hands off to a baseline-aligned field of GPU grain — same pixels, same colour, no seam — which peels crown-first and drifts away as smoke through a curl field. The backdrop opens behind it to reveal the page. Mount it over your app and unmount on onDone.

• Pixel Transition

  Reveal a second layer through a random pixelated dissolve on hover.

• Border Glow

  A cursor-proximity gradient border with an outer glow.

• Spotlight Shell

  A card shell with 3D magnetic tilt, radial glow, and a shimmer sweep.

• Animated Hamburger

  A three-bar hamburger that morphs to an X, driven by a toggle prop.

Appears In

• React Micro-Interaction Components