Neo-Brutal Reveal
A wrapper that reveals its content when it scrolls into view (a 22 px rise by default); stagger reveals its direct children one after another, 60 ms apart.
Motion & Effects
45 pieces in four styles. Preview each one live, then copy the prompt that puts it in your project.
Neo-Brutal Text Reveal
A heading or line of text that reveals word by word (or character by character), each word rising quickly into place.
Neo-Brutal Marquee
An endless row (or column) of items.
Neo-Brutal Spotlight
A box with the kit's dot-grid lens: a patch of ink dots that follows the pointer, and with ring a cobalt arc on its outline near the pointer.
Neo-Brutal Border Beam
A hard volt dash that travels along the inside of its parent's 2 px border: put it inside a relative parent with a border, and it takes the parent's radius and clips itself.
Neo-Brutal Shimmer
A hard cobalt band that sweeps across a short piece of ink text, for "working…" states only (shimmer means "unknown").
Neo-Brutal Scramble
Text that decodes from #%&+=/<>01 glyphs, on view, on hover or focus, or with the page entrance.
Neo-Brutal Typewriter
Types its text when it comes into view; several strings cycle behind a blinking ink block caret (an ambient loop that pauses offscreen and with MotionToggle).
Neo-Brutal Backdrop
The kit's signature background: the twelve column guides of the page grid, drawn as faint 2 px rules that draw down once, 60 ms apart, when they first come into view (with a dot field at high).
Neo-Brutal Crosshair
The forecast readout over a Chart: a 2 px ink vertical line, a 16 px volt dot and an ink tip ("Nov 14 · €31.2k") that snap to the nearest point under a fine pointer and return to rest when the pointer leaves.
Neo-Brutal Ticker
The ruled display marquee: a full-bleed band ruled top and bottom, on ink (inverse), volt or cobalt (accent), with big narrow words (type-display text-display-md) marching past and an eight-spoke asterisk between them.
Neo-Brutal Stamp
The slab: one keyword per page stamped into a flat volt block with an ink outline, tilted −1.5°.
Noir Aurora Reveal
A wrapper that reveals its content when it scrolls into view; stagger reveals its direct children one after another instead (90 ms apart).
Noir Aurora Text Reveal
A heading or line of text that arrives word by word out of a soft blur (or character by character); each word keeps the ink-silver gradient.
Noir Aurora Marquee
An endless row (or column) of quotes or chips, with faded edges.
Noir Aurora Spotlight
A box with the sky spotlight: a soft light that follows the pointer on the fill and, with ring, on the border, tinted ice at the left, aurora in the middle and iris at the right.
Noir Aurora Border Beam
A comet of sky light with a white-hot head that travels along its parent's border: put it inside a relative parent with a border (add glow-beam on the parent for the still glow around it), and it takes the parent's radius.
Noir Aurora Shimmer
A sheen that sweeps across a short piece of text, for "working…" states and one highlighted phrase.
Noir Aurora Scramble
Text that decodes from random mono characters, on view, on hover or focus, or with the page entrance.
Noir Aurora Typewriter
Types its text when it comes into view; several strings cycle with a blinking caret (an ambient loop that pauses offscreen and with MotionToggle).
Noir Aurora Backdrop
Noir's signature: the northern-lights curtain (a sky glow, three curtains of noise-masked rays with a violet fringe, and a bright hem) that lowers into place on load, then sways and breathes slowly.
Noir Aurora Aurora
The northern-lights curtain with the knobs the shared Backdrop lacks: which edge it hangs from, how many curtains, and the pointer "wind" (a gust that leans the curtains as the mouse crosses the section, then lets them settle).
Noir Aurora Horizon Sweep
The hairline between two default sections, fading at both ends.
Soft Bento Reveal
A wrapper that reveals its content when it scrolls into view; stagger reveals its direct children one after another instead.
Soft Bento Text Reveal
A heading or line of text that reveals word by word (or character by character).
Soft Bento Marquee
An endless row (or column) of logos, chips or quotes.
Soft Bento Spotlight
A box with a warm peach light that follows the pointer, optionally a rim light along its edge (ring); while hovered it rises and, with tilt, leans toward the pointer, and a press sinks it back on the squish.
Soft Bento Border Beam
A soft rim light that travels along its parent's edge (white on the blue block): put it inside a relative parent and it takes the parent's radius.
Soft Bento Shimmer
A sheen that sweeps across a short piece of text, for "working…" states and one highlighted phrase.
Soft Bento Scramble
Text that decodes from random characters, on view, on hover or focus, or with the page entrance.
Soft Bento Typewriter
Types its text when it comes into view; several strings cycle with a blinking caret (an ambient loop that pauses offscreen and with MotionToggle).
Soft Bento Backdrop
Soft Bento's background: soft candy blobs (peach behind the copy, butter low in the middle, lilac top right) drifting slowly; on the blue block they turn into warm white glows and wind grooves drift across.
Swiss Tech Mono Reveal
A wrapper that reveals its content when it scrolls into view; stagger reveals its direct children one after another instead.
Swiss Tech Mono Text Reveal
A heading or line of text that reveals word by word (or character by character).
Swiss Tech Mono Marquee
An endless row (or column) of logos, chips or quotes.
Swiss Tech Mono Spotlight
The crosshair hover: under the pointer a hard-edged lime cell (an ink edge on paper, none on ink) snaps to the box's 12-column grid behind the content, with a 1 px crosshair through it; ring adds crop marks that settle in, readout a live mono "X 471 · Y 302" tag.
Swiss Tech Mono Border Beam
A hard lime segment with an ink caret at its head, running along its parent's border (no glow): put it inside a relative parent with a border, and it takes the parent's radius and clips itself.
Swiss Tech Mono Shimmer
A mono sheen (the text colour through ink-3) sweeping across a short piece of text, for "working…" states.
Swiss Tech Mono Scramble
Text that decodes from random mono glyphs, on view, on hover or focus, or with the page entrance: the kit's way to bring section labels in (eyebrow={<Scramble text="Product" />}, signature dial 3).
Swiss Tech Mono Typewriter
Types its text when it comes into view; several strings cycle.
Swiss Tech Mono Backdrop
The Mono grid: the page's column guides (4 on phones, 12 from md) on the Container's columns, drawing down 45 ms apart when the band comes into view.
Swiss Tech Mono Crosshair
The hover readout for a tile, figure or chart: 1 px crosshair lines, a lime cell snapped to the grid under the pointer, crop marks and the live mono "X 471 · Y 302" tag (it flips to the left near the right edge).
Swiss Tech Mono Grid Guides
The page's printed grid: column guides on the Container's columns behind everything (-z-10, no pointer events), drawing down once when fonts are ready; with ruler, the numbered 01–12 column ruler with ink majors, in the flow where you place it.
Swiss Tech Mono Highlight
The selected word: an acid-lime box from cap height to the descender behind real text, wiping in left to right with the heading's entrance or reveal, optionally followed by the flush ink caret blinking 1 ↔ 0.
Swiss Tech Mono Dimension
A CAD dimension line over (or under) an inline target: a 1 px ink line with end ticks across the child's width and a mono label on it, drawing in from the left after the heading's entrance.
Preview everything. Take three a day, free.
A free account takes 3 new pieces a day: the code, the styles and the install prompt. Pro and Team remove the limit.