Animated React components installed as source. Text Reveal, Number Roll, Link, Field and Input are free; the rest comes with a one-time license.
Example usage of Turn.
Types a list of phrases one after another, without the harshness: letters fade in and sharpen instead of popping, the rhythm is a little uneven like a person’s, and a finished phrase fades out as one instead of being backspaced.
Example usage of Typewriter.
Someone is writing. Three dots that rise and settle in turn inside a bubble, or a small pill that names who is typing.
Example usage of Typing Indicator.
The live height of an element's content, for a container that animates its height to fit as the content opens, closes or grows. Includes a settled flag so a section that starts open does not animate in.
Holds the Data Grid's filters and the actions that change them, keeping each operator in step with how many values it has. Works out every column's options, counts and number range from the rows, or takes them from a server. Renders nothing, so the same state can drive a table, a query or a URL.
Wraps a callback so it runs once the calls stop for a given time, always with the newest arguments and the newest callback. A call still waiting when the component unmounts runs then, so the last keystroke before a popover closes is not lost.
Decides when a CSS entrance plays: a frame after mount, or when the element scrolls into view. Returns a boolean to put on a data attribute; includes a small useInView.
A ref that always holds the newest value of a prop or callback, updated after each render. Lets an effect or a subscription call the latest callback without re-running whenever its identity changes.
Points several refs at one element, so a component can keep its own ref and still honour the one passed to it. Supports object refs, callback refs and React 19 ref cleanups.
Keeps the content that was just replaced for the length of its exit, so it can fade out in CSS while the new content fades in. Give it a key and what is shown under that key; it returns the previous pair until the duration has passed.
Whether the visitor has asked for reduced motion, as a boolean that is safe to read while rendering: false on the server and during hydration, then the real setting, and it updates if the setting changes.
How far the page, or a scroll container, has been scrolled, from 0 to 1, kept current as it scrolls or resizes, with a setter that scrolls it to a fraction. Vertical by default. Pairs content with a progress indicator or a scrubber.
A banner for a show or a launch: the episode plays behind the words, blurred to a glow that fades to black at the sides. On top sit a title, a line about it, one clear button that opens the player, and the ways to follow along.
Example usage of Video Hero.
A silent, looping preview that opens into a near full screen player. The player has the title and a link along the top, one row of controls along the bottom, a line you can scrub, and every key you would expect. It all gets out of the way while you watch.
Example usage of Video Player.
A recorded message in a chat bubble. The waveform fills as it plays, and the play button turns into pause in one movement. Pair it with Voice Recorder and it shows the shape of what was actually said.
Example usage of Voice Note.
A record button that grows into a voice note as you speak. A warm glow drifts round its edge and swells with your voice, the bars build up beside it, and stopping hands back the audio with its real waveform.
Example usage of Voice Recorder.