283 components
Components
Every component by section. Each page has live examples, the code behind them, props and accessibility notes.
Base16
- ButtonThe primary action. A capsule by default (squared on request), with six looks, four tones and five sizes. Presses scale down slightly; loading keeps the width.
- Icon ButtonA square button that holds only an icon (round on request). aria-label is required by the types.
- InputText field in the iOS filled look (default), outlined, on a surface, or plain for a field inside an inset grouped row. Adornments hold icons, units or buttons.
- TextareaMulti-line text that grows with its content between minRows and maxRows, with an optional live character counter.
- SelectPick one option from a list. The menu grows out of the trigger, with a checkmark on the selected row; full keyboard and typeahead support.
- CheckboxA rounded square or the iOS selection circle, with a 1.5px edge, a drawn-in checkmark and an indeterminate state. Pass label and description for a clickable row.
- RadioOne choice among a few: a circle with a dot, or the iOS list style with a checkmark on the chosen row. Arrow keys move between options.
- SwitchThe iOS capsule toggle: a round knob that stretches while pressed. Accent when on (follows the palette), or the system green. Use for settings that apply immediately.
- SliderPick a value or a range. The UISlider look (a thin track and a large white knob), or a thick bar where the fill is the handle, as in Control Center.
- BadgeSmall read-only label for statuses and counts.
- AvatarA photo with a graceful fallback: initials on a flat tint whose hue is stable per name, or an icon. Groups overlap and fold into +N.
- TagChips for keywords and filters: static, toggleable (aria-pressed) or removable.
- LabelForm label with a required mark (announced to screen readers) and an optional hint.
- SpinnerA rotating arc in the current text color.
- KbdKeycaps for shortcuts. "mod" reads ⌘ on Apple devices and Ctrl elsewhere.
- Toggle GroupPressable options on a gray rail, one at a time or several, in the iOS segmented look. Toggle is a single pressable capsule.
Layout11
- ContainerCenters content with a max width and side gutters that respect the iPhone safe areas.
- StackFlex column or row with a gap on the spacing scale. HStack and VStack are shorthands; direction="responsive" stacks on phones.
- GridEqual columns per breakpoint, or an auto-fill grid that fits as many columns as the minimum width allows.
- CardBordered surface for grouped content, composed of media, header, content and footer. Interactive cards sharpen their border on hover and press in.
- DividerHairline separator: horizontal, vertical, inset from the start like list rows, or with a label.
- SectionFull-width page band with vertical rhythm, an optional heading block and a container. tone="dark" pins its own theme.
- NavbarSite header: brand, links and actions on desktop; a full-width menu with large links on phones. Hairline on scroll, optional hide-on-scroll.
- Navigation BarAn app bar: back button, title, actions. With largeTitle the title starts big and collapses into the bar as you scroll.
- SidebariPadOS-style navigation: a sticky column (collapsible to an icon rail) from a breakpoint up, a drawer below it. Groups take an icon and fold away; SidebarSearch filters the rows as you type.
- FooterQuiet, small-type footer. Link columns become tap-to-open rows on phones.
- Tab BarThe bottom bar for phone layouts: classic edge-to-edge with a rule over the active tab, or a floating bar with a sliding highlight and an optional search pane beside it that opens a command palette.
Overlay11
- ModalA dialog over the page. Centered on desktop; on phones a sheet that slides up from the bottom, or centered if you prefer.
- Bottom SheetA bottom sheet: drag between snap points, flick down to close. The footer stays on the visible edge at every height.
- Action SheetA short list of choices in one panel: optional title and message on top, left-aligned rows with leading icons, Cancel last. Rises from the bottom on phones, a centered panel on wide screens.
- Alert DialogA small confirmation dialog for decisions that need an answer: left-aligned title and message, cancel and the main action at the bottom right. Cancel is focused first; destructive actions are red.
- PopoverInteractive content anchored to a trigger: filters, pickers, short forms.
- TooltipA short label on hover or keyboard focus, for icon buttons. Not for essential information.
- ToastBrief notifications from anywhere with toast(): compact cards that slide in from a corner of the screen, pause on hover and can be swiped away.
- AlertInline messages in the page: info, success, warning, danger, with actions and an optional dismiss.
- Action BarA contextual bar for a selection. It slides up from the bottom with a rolling count and the actions that apply; edge to edge on phones, centered on wider screens.
- DrawerA panel that slides in from an edge: details, filters or a short sheet from the bottom. Same parts as Modal.
- Hover CardA preview shown while the pointer rests on a link, such as a traveller or a place. Looks like Popover.
Feedback5
- SkeletonShimmering placeholders that keep the layout steady while content loads.
- ProgressHow far a task has got: a bar or a ring, determinate or indeterminate.
- Empty StateWhat to show when there's nothing yet: an icon, a title, one helpful sentence and the action that fixes it.
- Notification CenterAn inbox grouped into Today and Earlier with unread dots, time ago, mark read, mark all read, delete, skeletons, an empty state and load more. NotificationBell opens it from a bell with a count.
- BannerA full-width announcement bar for the top of a page or app.
Data12
- TableRows and columns on a rounded surface: sortable headers, density, stripes, sticky header, and cards on phones.
- ListGrouped rows: sections, icon tiles, values, controls, checkmarks, chevrons and swipe actions.
- AccordionDisclosure rows that expand in place: grouped on one rounded panel, as separate cards, or with hairlines only.
- CollapsibleOne region that shows and hides with an animated height, like "Show 3 more stops". For a list of sections use Accordion.
- TimelineEvents in order along a line, with done, current and upcoming states.
- Stat CardOne number that matters: it counts up into view and shows the change against a previous period, with an optional sparkline.
- Data TableTable, SearchBar, Pagination, Skeleton and EmptyState in one server-friendly table: it renders what you pass and reports sorting, searching, paging and selection.
- Session ListWhere the account is signed in: browser and OS, IP, location and last activity per device, with sign out per row and everywhere else after a confirmation.
- API Key ListAPI keys with masked prefixes, scope badges, created, last used and expiry; a create dialog that reveals the new key once with a copy button; revoke behind a confirmation.
- SnippetA code or command block with a copy button, a language label and optional variants.
- Usage MeterPlan usage as one stacked bar against a limit, with a legend and a total.
- CountdownTime left until a target, with rolling digits.
Forms15
- Form FieldAccessible validation without a form library. Rules run on blur, live once an error shows, and for every field on submit. Then focus jumps to the first problem.
- ComboboxA text field with a filterable list of options (autocomplete). Options are plain data with groups, descriptions and icons; filter on the client or fetch as the user types.
- Multi SelectA Combobox that keeps several values as removable chips inside the field. Backspace removes the last chip; cap the count with max or add a select all row.
- Date PickerA field that opens a calendar: popover on desktop, bottom sheet on phones. Single dates or ranges, presets, limits, localized names.
- Date Range PickerA field showing the trip dates ("12 Jun · 15 Jun") that opens two months side by side, one on phones, with range highlight, hover preview and presets.
- Time PickerA time field you can type into ("930", "9:30 pm") or pick from a list every few minutes. 12 or 24 hour from the locale.
- CalendarA month grid to pick a day or a range, with full keyboard support. DatePicker is built on it.
- Search BarSearch field: clear button, an optional Cancel that slides in while focused, debounced input, loading state and a focus shortcut.
- File UploadDrop files, click, or use the keyboard. Type, size and count checks, image previews, per-file progress and removal.
- Password InputA password field with a show/hide toggle and an optional strength meter, fed by the built-in scorePassword() or your own scorer.
- OTP InputOne-time codes in separate boxes: auto advance, Backspace to go back, arrows, and paste or SMS autofill of the whole code. onComplete fires when the last box is filled.
- Number FieldA number between minus and plus buttons, for guests, nights or amounts. It formats with Intl (currency, units, percent) and the number rolls when the buttons change it.
- RatingStar rating. Interactive it is a radio group with a hover preview; read-only it shows averages down to half stars.
- Input GroupAn input with attached boxes: text like https:// or .com, icons, a Button or a Select on either side. One border, one radius, one focus ring.
- Tag InputA field that turns typed values into removable tags: Enter or comma adds, Backspace removes the last, pasted lists are split.
Auth8
- Auth CardThe frame of sign in and sign up screens: logo, title, a line of description, the form and a footer. AuthDivider is the "or" rule.
- Login FormEmail and password sign in with remember me, a forgot password link, a slot for social buttons and a footer. Client validation, server errors through props.
- Signup FormCreate an account: name, email, a password with a live strength meter, and an optional terms checkbox that becomes required.
- Forgot Password FormAsk for the account email, then confirm that a link is on its way without revealing whether the account exists.
- Reset Password FormChoose a new password with a strength meter and confirm it. Keep the reset token in your own code and send it along.
- Two Factor FormThe second step of sign in: a code that submits itself when complete, a switch to a backup code, and an optional resend with a cooldown.
- Two Factor SetupTurn on an authenticator app: scan the QR code or copy the key, confirm a code, then save the backup codes (copy or download).
- OAuth Buttons"Continue with" buttons with built-in monochrome marks for Google, GitHub and Apple, a key for anything else, links or callbacks.
AI8
- Bot FaceAn expressive assistant avatar: idle, listening, thinking, speaking and more. Eyes live on an imaginary sphere, the body squashes and stretches, and it can follow your voice.
- ChatA complete AI chat: thread that follows the stream, bubbles or document-style answers, reasoning, sources and message actions, composed from the AI components.
- ComposerThe prompt box: grows with text, attachments by button, drag & drop or paste, a toolbar slot, voice, and Send that becomes Stop.
- Streaming TextText that arrives in pieces: each new chunk fades in and a caret blinks while streaming. Plus the typing indicator.
- Prompt SuggestionsStarter prompts for an empty chat: cards with icons, or chips that scroll on phones.
- Result CardResults and sources: rich cards, numbered citation chips inside answers, and a row of compact sources.
- Model PickerChoose the model: a quiet trigger, and a menu with icons, descriptions, badges and groups.
- ReasoningShow the work: a thinking panel with a live timer that folds into "Thought for 12s", step lists for tool calls, and shimmering status text.
Effects7
- Animated TextText that moves with intent: blur-in, rotating words, palette gradients, shine, decrypting, counting numbers and words that light up as you scroll. Readers always get the plain text.
- RevealContent that enters as it scrolls into view, alone or in sequence, plus a reading progress bar and parallax.
- Page TransitionAnimated page entrances for the App Router, used in app/template.tsx. "slide" pushes from the trailing side and reverses on Back. This docs site uses it.
- Hover EffectsPointer effects for desktop: magnetic buttons, a spotlight that follows the cursor, 3D tilt with glare, and click sparks. Touch and reduced motion get the plain content.
- Motion GraphicsAnimated pieces that explain something: paths that draw themselves, pulses moving between services, items orbiting a center, rolling digits, a live voice level and status marks that draw in.
- Scroll EffectsMotion driven by the page scroll: steps with a pinned visual, a row that moves sideways while you scroll down, media that opens to full width, and opt-in smooth wheel scrolling.
- 3D EffectsDepth without WebGL: a card that turns over, a ring of slides, cards that pile up as you scroll, a tilted wall of drifting tiles and a globe of dots you can turn.
Marketing7
- HeroThe opening of a page: announcement pill, display title, description, actions, footnote and a visual. Centered or split, on the page, a soft wash or a dark band.
- Feature GridWhat the product does: cards, plain columns, or a bento layout with spans and visuals. Items enter one after another.
- PricingPlans with a monthly/yearly switch: prices roll to the new amount and the saving is shown. Highlight a plan; mark what's included.
- TestimonialQuotes with people behind them: a big featured quote, equal-height columns, or a swipeable carousel with snap.
- CTAThe closing call to action (accent, surface or dark, with an optional visual) and a newsletter signup.
- Contact FormName, email, an optional subject and the message, validated on the client, with a success panel and a hidden honeypot field named website.
- Logo MarqueeAn endless row of logos or names drifting sideways with faded edges. Pauses on hover; static and wrapped with reduced motion.
Text Animations26
- ASCII TextA word drawn as a grid of ASCII characters, with a slow wave running through it. Picks characters by brightness and colors them with the palette.
- Circular TextLetters set around a circle that turns slowly, like a stamp or a badge. Hover speeds it up, slows it down or pauses it.
- Curved LoopA marquee running along a curve. Drag it to scrub; let go and it keeps going the way you threw it.
- Depth TextA heading extruded into 3D with stacked layers. It tilts toward the pointer so the sides show.
- Echo TextFading copies trail behind the text and breathe outward and back.
- Falling TextWords drop out of a sentence and pile up at the bottom of the box. Pick them up and throw them. Starts on view, click or hover.
- Fold TextEach letter is paper folded along its middle. The halves open flat one by one on view, or crease back on hover.
- Fuzzy TextText whose thin slices jitter sideways like a weak signal. The noise grows while the pointer is over it. Takes its font from your classes.
- Glitch TextTwo offset copies in split colors flicker through random slices, like a bad signal. Always on, or only on hover.
- Masked HeadingEach line slides up from behind an invisible edge when the heading comes into view, one line after another.
- Particle TextText made of dots that fly in to form the letters, scatter away from the pointer and spring back.
- Scrambled TextLetters near the pointer break into symbols for a moment, then settle back.
- Scroll FloatLetters float up and un-squash as the text scrolls into view, tied to the scroll position.
- Scroll VelocityMarquee rows that drift on their own and rush ahead when you scroll. Scrolling up turns them around; rows alternate direction.
- ShuffleEach letter is a slot that spins through random characters and lands on the real one, in sequence, on view and again on hover.
- Split Flap TextA departures board: each tile flips through the alphabet until it lands on its letter. Change the text and it flips to the new one.
- Split TextLetters or words rise into place one after another when the text scrolls into view. The start offset, opacity and tilt are yours to set.
- Stroke TextThe outline of each letter is drawn on, then the letters fill in. Scales with the surrounding font size.
- Tech TextA heads-up readout: monospace text types on behind a block cursor, the newest letters still decoding, inside bracket corners with a passing scanline.
- Text CursorThe pointer leaves a trail of small text marks that drift and fade over an area.
- Text LoopPhrases roll upward through a drum, one step at a time, forever. Show one slot or keep faded neighbors in view.
- Text PressureA heading that spans its container. Letters near the pointer get heavier and taller, like pressing into the type. Needs a variable weight font such as Geist.
- Text TypeA typewriter. Types a sentence, waits, deletes it and types the next, with a blinking cursor.
- True FocusOne word is sharp inside a bracket frame while the rest blur. The focus walks along the sentence, or follows the pointer.
- Variable ProximityLetters near the pointer gain weight and settle back with distance. Works in running text and wraps normally. Needs a variable weight font such as Geist.
- Warp TextLetters ride a travelling wave, lifting and leaning as it passes. The wave grows around the pointer.
Animations35
- Animated ContentSlides its content in from any side when it scrolls into view, with optional fade and scale, on a spring or a tween.
- Blob CursorA few soft blobs trail the cursor and melt into each other, behind the content of their container.
- CrosshairTwo thin lines meet at the cursor like a viewfinder, with an optional coordinate readout.
- Crystalized BallA glass sphere full of slowly turning crystal facets, with a rim light and a highlight that leans toward the cursor.
- CubesA grid of small 3D cubes that turn to face the cursor, and roll in a wave from wherever you click.
- Cursor GridA field of dots that swell and take the accent near the cursor, then settle back.
- Dither VeilA drifting veil of noise drawn as chunky ordered-dither pixels, that parts around the cursor.
- Elastic MeshA wire grid that bends away from the cursor and springs back, with a ripple on click.
- Electric BorderA border that crackles like a live wire around any content, with a soft glow behind it.
- Electric LogoAny logo drawn in currentColor, an SVG or text, charged with electricity: its edges crackle over a soft glow.
- Fade ContentFades its content in, optionally out of a blur, when it scrolls into view.
- Ghost CursorThe cursor leaves a pale, smoky trail that drifts up and fades out.
- Glare HoverA band of light sweeps across the surface when the pointer enters, like light catching glass.
- Glow CursorA soft glow trails the cursor with a little lag, with a bright core right at the pointer.
- Gradual BlurContent blurs progressively toward one edge, like a frosted fade. Place it in a relative container, or pin it to the viewport.
- Halftone RevealA screen of halftone dots covers the content and shrinks away under the cursor, or sweeps off when it scrolls into view.
- Image TrailImages pop in along the cursor path and fade away. Stays inside its box unless fullPage is set; touch screens get the plain content.
- Laser FlowA beam of light falls from the top and spills a glowing fog where it hits the floor. WebGL2, follows the accent color.
- Meta BallsLiquid blobs drift, merge and split. One more blob follows the pointer and melts into the rest.
- Metallic PaintLiquid chrome flowing inside a shape. Pass any image with transparency, such as an SVG logo; its alpha is the mask.
- NoiseAnimated film grain laid over its parent. One small tile, shifted every few frames, so it stays cheap at any size.
- Orbit ImagesImages circle a center on a tilted ring. The ones in front grow and sit on top, the ones behind shrink and dim.
- Pixel SwapOn hover an image builds in block by block, in a springy wave that starts where the pointer came in.
- Pixel TrailSquare pixels light up under the cursor and fade out behind it. Stays inside its box unless fullPage is set.
- Pixel TransitionA card that swaps between two faces behind a curtain of solid pixels. Hover, focus or tap.
- RibbonsSoft ribbons chase the cursor on springs, each a little slower, tapering towards the tail.
- Ripple DistortionAn image that ripples like water under the cursor. An SVG filter, so any image works, cross origin included.
- Scroll ExpandA rounded media frame that opens to full bleed as it scrolls into the middle of the viewport.
- Shape BlurA crisp shape or logo that drifts out of focus under the pointer, like a lens with a shallow depth of field.
- Splash CursorMoving the cursor stirs up clouds of color that swirl, spread and fade, like dye in water. Stays inside its box unless fullPage is set.
- Star BorderA thin border with a point of light running around it. A button by default, any element with as.
- Sticker PeelA sticker you can drag around. Hover lifts its corner into a curl that shows the backing.
- StrandsStrands of light twist inside a frosted glass orb and swell where they meet, like a voice assistant listening.
- Swarm CursorA cloud of particles flocks after the cursor and drifts around it when it stops. Stays inside its box unless fullPage is set.
- Target CursorCorner brackets ring the cursor and spin; over a marked element they lock onto its edges. The system cursor stays visible.
Interactive47
- Accordion GalleryA row of photo panels. The one under the pointer or keyboard focus opens wide with its caption, the rest shrink to strips. Stacks vertically on phones.
- Animated ListA scrolling list whose rows pop in as they scroll into view, with soft fades at both ends. Pick a row with a click or the keyboard.
- Border GlowA card whose border lights up on the side nearest the pointer, brighter the closer you get to the edge, with a soft halo outside.
- Bounce CardsA fan of photo cards that bounce in when they come into view. The hovered or focused card straightens and lifts while its neighbours lean away.
- Bubble MenuA floating logo pill and menu button. Opening it pops the links out as big tilted bubbles over a blurred backdrop.
- Card NavA floating navigation bar that springs open into a row of cards, each with a title and its own links.
- Card SwapA deck of cards stacked in depth. On a timer the front card drops away and slides in at the back.
- Chroma GridProfile cards shown in grayscale, with a circle of full color following the pointer across the grid and a lit border on the card under it.
- Circular CarouselImages on a free spinning 3D ring: drag with momentum, it snaps to the nearest card, click a card to bring it to the front.
- Circular GalleryA strip of photos bent along an arc. Scroll, drag or Tab through it; each card opens the full image in a dialog.
- CounterA number whose digits roll like a mechanical counter, each place on its own spring, passing through the digits in between.
- Curved InputA text field bent along an arc: the bar, the text, the caret and the send button all follow the curve. A real input sits underneath.
- Decay CardAn image card that warps like wet paint as the pointer moves over it, then settles back to a clean image.
- Depth CarouselCards on a rail that runs back into depth. Drag, use the arrows or let it advance on a timer.
- DockApp icons on a glass shelf that magnify as the pointer passes, with a label above the hovered one.
- Dome GalleryPhotos tiled on the inside of a sphere. Drag to look around; click a tile to open it.
- Drift WallAn endless wall of image tiles at an angle, rows drifting in alternating directions. Hovered tiles lift towards you.
- Elastic SliderA slider that thickens as you touch it and stretches like rubber past either end, then springs back.
- Flex CarouselAn endless row of images that bends through liquid glass at its edges: swollen and rippled at the sides, clear in the middle.
- Flowing MenuBig text links. Hovering a row slides in a colored band from the edge the pointer came through, carrying a marquee of the label and a picture.
- Fluid GlassA thick glass lens or pill gliding over content after the pointer, bending what is under it with a bright rim.
- Flying PostersA column of posters streaming upward as if around a drum. Drag to push the stream; it bends harder the faster it goes.
- FolderA folder that opens on click: the flap tilts down and up to three papers fan out, leaning towards the pointer.
- Glass IconsApp style icon tiles: a colored tile tilts behind a frosted glass one and swings out on hover or focus, with the label sliding in.
- Glass SurfaceA frosted liquid glass panel: blurred, saturated backdrop with a light catching rim. On Chromium the edges bend the backdrop like a thick lens.
- Gooey NavA nav row where the active pill flows to the chosen item through a goo filter, shedding droplets that melt back in.
- Holo CardA collectible card with holographic foil and glitter that shift as it tilts toward the pointer.
- Infinite MenuItems on a sphere you spin by dragging. It coasts, then the nearest disc swings to the front and its title shows below.
- Infinite SpiralAn endless 3D helix of images that climbs and turns on its own. Drag or use the arrow keys to push it.
- LanyardA badge hanging from a strap with a small verlet rope simulation. Grab and throw it, or swing it with the arrow keys.
- Line SidebarA quiet list nav: items near the pointer lean out, their lines grow and the text brightens.
- Magic BentoA bento grid whose card borders glow around the pointer, even from a neighbor card, with a soft spotlight inside and optional tilt.
- MasonryAn image wall packed into the shortest column. It reflows smoothly on resize and items rise in one after another on first view.
- Morph SliderAn image slider that melts from one picture to the next with a WebGL2 displacement transition.
- Option WheelAn iOS style picker drum. Scroll, drag or use the arrow keys; rows tilt away from the center and it settles on the nearest one.
- Pill NavA capsule nav bar: hovering floods a pill from below while its label rolls up. Folds into a menu button on narrow screens.
- Pixel CardA card that fills with shimmering pixels from the center outward when hovered or focused, and drains on leave.
- Profile CardA tall profile card that tilts with an iridescent sheen, with a glass bar for handle, status and a contact button.
- Reflective CardA brushed metal ID card: a light band sweeps across as it tilts, and the reflected room shifts the other way. Optionally reflects a looping video.
- Scroll StackCards that stick and pile up as you scroll, each shrinking back as the next slides over it.
- Specular ButtonA glass capsule button whose rim catches the light, with a highlight that glides toward the cursor.
- Spotlight CardA card with a soft light that follows the pointer.
- Staggered MenuA menu button that opens a side panel in layers: two colored sheets sweep in, then numbered links rise in sequence.
- Step FlowA multi-step panel: dots fill and check as you go, content slides toward where you are heading, and the height eases to fit. For a progress indicator only, use Stepper.
- Swipe CarouselOne card at a time that you swipe or drag sideways, with dots and an optional autoplay timer that fills the active dot. For a 3D ring, see 3D Effects.
- Swipe StackA pile of cards you flick through: drag the top one away, or click it, and it tucks under the pile.
- Tilted CardAn image that tilts toward the pointer and grows a little, with a caption tag trailing the cursor and an optional overlay.
Backgrounds65
- Acid SquaresA rolling field of glossy rounded tiles. A slow wave lifts each tile, two colored lights drift across and catch the bevels, and the pointer swells the tiles under it.
- Aero ShardsRibbons of thick glass shards streaming sideways on three depths, catching light along their edges, over a faint grid of survey markers.
- AntigravitySmall capsules float slowly upward. Near the pointer they are pulled onto a spinning ring around it, then drift away again. Canvas 2D.
- ASCII RippleA field of monospace characters that ripples like water under the pointer. Taps drop bigger waves, and an idle drop keeps it alive when nobody is around.
- AuroraSoft curtains of light rippling across the frame with fine vertical rays. The pointer lifts the curtains above it.
- BallpitGlossy balls piled up under gravity, bouncing off each other and the frame. Move the pointer through them to shove them around. Canvas 2D with simple physics.
- BeamsSlanted shafts of light falling from the top, each with its own width and a slow shimmer. They slide sideways; the pointer brightens the ones near it.
- Color BendsWide bands of color that bend and flow into each other like light through warped glass. The pointer pushes a soft dent into them.
- CRT WarpA blocky plasma on a curved tube screen, with scanlines, an RGB phosphor mask, a rolling band and a power on intro. The pointer bulges the picture.
- Dark VeilA slow, smoky veil of tinted light folding over itself, with faint scanlines. The pointer stirs the smoke.
- DitherFlowing noise waves printed with a 4x4 ordered dither in chunky pixels. The pointer adds a bright spot.
- Dot FieldA halftone field of dots whose size follows drifting noise and a ripple from the center. The pointer swells the dots under it.
- Dot GridA calm grid of small dots with a faint shimmer. Near the pointer the dots light up, grow and get pushed away.
- Faulty TerminalA screen of pixel glyphs typed in ragged lines that keep rewriting, with scanlines, flicker and rows that tear sideways. The pointer brightens nearby text.
- FerrofluidA glossy black pool of magnetic fluid. Swells roll across and raise fields of spikes, and the pointer pulls up a crown. The fluid stays dark in both themes.
- Floating LinesThin glowing lines floating on slow, layered waves, shading from one color to another. The pointer draws the nearest lines toward it.
- Flux LinesGlowing contour lines tracing a churning field. The pointer is a magnet: it lights the lines around it and curls them.
- GalaxyLayers of twinkling stars turning slowly over a faint nebula. The pointer shifts the layers by depth.
- Ghost FibersRibbons of fine glowing fibers that twist, fold and drift on three depths with a shallow depth of field. The pointer height picks the ribbon in focus.
- Gradient ASCIISoft drifting glows drawn in ASCII characters, from a dot to a dense @, colored along a gradient. Characters scramble under the pointer.
- Gradient BlindsA flowing gradient seen through folded blinds, with a spotlight that follows the pointer.
- Gradient WavesSoft stacked waves rolling along the bottom, each a step of a gradient. The pointer lifts the crests.
- GrainientA slow warped gradient of three colors with film grain on top.
- Grid DistortionAn image or palette gradient cut into cells that the pointer drags around; they settle back when it stops.
- Grid MotionA tilted wall of tiles whose rows slide with the pointer, each with its own lag and direction. Tiles take any content.
- Grid ScanA perspective grid on floor and ceiling with a bright scan band sweeping to the horizon.
- HyperspeedA night highway in perspective with streaks of lights racing both ways. Pure WebGL2, no 3D library.
- IridescenceAn oil on water sheen of folding interference bands, tinted by one color.
- IrisA single glowing eye with fibers in the iris, a breathing slit pupil and a flickering corona. It follows the pointer and wanders when it leaves.
- Letter GlitchA screen of monospace characters flipping to new glyphs and colors, faster around the pointer, with a vignette.
- Light PillarA tall shaft of light with drifting haze, fading between two colors. It leans toward the pointer.
- Light RaysShafts of light fanning down from above, flickering slowly and bending toward the pointer.
- Light TunnelFlying down a tunnel of rings and streaks of light. The pointer moves the vanishing point.
- LightfallThin streaks of light falling in columns, each with a bright head and a fading tail.
- LightningA flickering electric bolt with a soft glow that follows the pointer across.
- Line WavesA stack of thin lines undulating like a sound wave. The pointer parts the lines around it.
- Liquid ChromeA sheet of molten chrome folding over itself. The pointer sends ripples through it.
- Liquid EtherColored smoke stirred by the pointer: a small fluid simulation on the GPU that stirs itself when idle.
- Magic RingsConcentric glowing rings that wobble and pulse, each with a bright arc spinning around it.
- Magnet LinesA grid of short lines that turn to point at the cursor like compass needles.
- Micro SlatsA wall of very thin slats tilting in slow waves and catching the light. The pointer flips the slats under it.
- Molten MetalA churning pool of liquid metal, glowing in the seams and cooling to a dark crust. The pointer heats it.
- OrbA glowing ring with a noisy, living edge. Colors drift around it and the edge grows wilder as the pointer nears the center. Fills its parent: place it with absolute inset-0 behind your content.
- ParticlesA slowly turning 3D cloud of dots, near ones bigger and brighter. The pointer tilts the cloud. Fills its parent: place it with absolute inset-0 behind your content.
- Pattern WavesA halftone grid whose marks swell and shrink as waves pass through it. The pointer adds a swell of its own. Fills its parent: place it with absolute inset-0 behind your content.
- Pixel BlastDrifting noise drawn as a dithered field of chunky pixels. The pointer sends ripples through it. Fills its parent: place it with absolute inset-0 behind your content.
- Pixel SnowSquare flakes falling in layers, near ones bigger and faster. The pointer is the wind. Fills its parent: place it with absolute inset-0 behind your content.
- PlasmaThick flowing color folded over itself again and again. The flow bends towards the pointer. Fills its parent: place it with absolute inset-0 behind your content.
- Plasma WaveA few glowing waveforms that cross and breathe. The lines lean towards the pointer. Fills its parent: place it with absolute inset-0 behind your content.
- PrismA glass triangle that catches a thin beam and fans it out into a spectrum. It turns with the pointer. Fills its parent: place it with absolute inset-0 behind your content.
- Prismatic BurstSpectral rays bursting from a bright core and slowly turning. The core leans towards the pointer. Fills its parent: place it with absolute inset-0 behind your content.
- RadarA sweep turning over range rings and spokes, lighting up contacts as it passes. The pointer shows up as a contact. Fills its parent: place it with absolute inset-0 behind your content.
- Ripple GridA fine grid rippling outwards from the center, and again from the pointer. Fills its parent: place it with absolute inset-0 behind your content.
- ScannerA bright beam sliding back and forth over a dot matrix, waking the dots it passes. Hover to steer the beam. Fills its parent: place it with absolute inset-0 behind your content.
- Shape GridA grid of outlined shapes drifting diagonally. Cells under the pointer fill in and fade out behind it. Fills its parent: place it with absolute inset-0 behind your content.
- Shape WavesNested polygon outlines wobbling like a struck string. The center drifts towards the pointer. Fills its parent: place it with absolute inset-0 behind your content.
- Side RaysShafts of light pouring in from the two top corners. With the pointer over it, the light turns to look. Fills its parent: place it with absolute inset-0 behind your content.
- SilkSlow folds of shiny fabric with a fine grain. Opaque: it paints the whole area in deep tones, so set light text on it. The folds turn towards the pointer. Fills its parent: place it with absolute inset-0 behind your content.
- Sliced WavesA wave pattern cut into horizontal strips, each sliding on its own. Strips near the pointer slide further. Fills its parent: place it with absolute inset-0 behind your content.
- Soft AuroraSoft curtains of light drifting across the frame, brighter near the pointer. Fills its parent: place it with absolute inset-0 behind your content.
- SwirlThick paint in three colors, slowly stirred around the center and drawn in chunky pixels. The pointer pulls the vortex toward it.
- ThreadsA loose bundle of fine lines rippling across the frame. The bundle reaches for the pointer. Fills its parent: place it with absolute inset-0 behind your content.
- TopographyContour lines of slowly shifting terrain, every fifth one an index line. The pointer raises a hill. Fills its parent: place it with absolute inset-0 behind your content.
- WavesA curtain of vertical lines swaying on layered waves. The pointer pushes the lines aside. Fills its parent: place it with absolute inset-0 behind your content.
- Web ThreadsDrifting points joined by fine threads when they come close. The pointer joins in and gathers the web. Fills its parent: place it with absolute inset-0 behind your content.