Changelog
What's new,
and when.
Every component, block, and template as it lands, newest first. Follow any link to grab the code.
August 2026
9 new- Magnetic DotsA dot grid backdrop driven by a real spring, not a lerp. Dots carry velocity, so they get flung past their rest position and ring back — and the field reads how fast you move, not just where you are: a swipe throws dots further than the same path taken slowly. Click for an expanding shockwave. The canvas is pointer-transparent and listeners bind to the container, so it keeps reacting under headlines and buttons. Fixed 1/120s sub-stepping keeps the spring stable and frame-rate independent; the dirty rect bounds the cost to the influence radius.
- Iso MomentumAn isometric slab field where every slab's height tracks pointer proximity and springs independently. The pointer flows through a motion value into each slab's path `d` string at 60fps — no React state, no re-renders while it moves. Pointer events, so it works under touch and pen, not just a mouse.
- Velocity MarqueeAn infinite strip whose speed and skew couple to scroll velocity — it accelerates as you scroll, reverses when you scroll back, and eases to a base drift when you stop. The wrap is a modulo on a measured content width (seamless in both directions, no CSS-animation restart), and the velocity is smoothed by an exponential moving average so it coasts instead of snapping.
- Kinetic TypePer-glyph variable-font response to pointer proximity — axes swell near the cursor and relax away from it, continuously and reversibly. Glyph boxes are pinned to their resting widths so animating `wght` can't shift neighbours, stale the cached centres, or re-wrap the line; centres are measured once and only re-read on resize or font swap. The accessibility tree reads one clean string.
- Morph IconTrue SVG path interpolation between two icons — not a cross-fade. Ships its own path normalizer with no dependency: a cursor-based parser (correct on packed arc flags, where a number regex silently fails), every command reduced to cubics including the full endpoint→centre arc conversion, equal-arc-length resampling, and a rotation/direction search that minimises total travel so the morph never ties itself in a knot. Multiple subpaths are paired by centroid, and an unmatched one collapses into its nearest counterpart.
- Scroll TimelineContinuous scroll-linked animation on the native Scroll-Driven Animations API, with a JS fallback that is numerically identical rather than merely similar. Both paths drive one registered custom property, `--st-progress`, so there is a single renderer and only the source of the number changes — the spec's four view-progress ranges and a real cubic-bézier solver make the fallback match to ~1e-6. Set `forceFallback` on one of two instances to check it yourself.
- Dot FieldA canvas dot grid that reacts around the cursor, at a density SVG can't reach. The per-frame cost is bounded by the influence radius rather than the dot count: only the dirty rect is cleared and redrawn, and dots are batched into 16 paths by quantised alpha instead of one fill each. DPR-correct on retina, and the rAF loop is genuinely cancelled — offscreen, backgrounded, or simply settled.
- Sortable ListDrag-to-reorder, hand-written, with a keyboard mode that shares the same code path. The target index is a pure function of geometry frozen at lift and the pointer delta — monotonic in the delta by construction, so there is no feedback loop to oscillate in at any drag speed. Pointer capture, edge auto-scroll, a drop animation into the final slot, and `aria-live` announcements throughout.
- Drag SheetA bottom sheet with snap points that feels native rather than like a `<div>` with a transition — three formulas and a state machine. Snapping is velocity-projected, so a flick and a slow drag past the same point resolve differently; bounds use Apple's rubber-band curve; and the drag-vs-scroll decision is made on the first `pointermove` past a 4px threshold and locked for the whole gesture, which is what stops a sheet from stealing a scroll halfway through.
July 2026
27 new- Text RevealReveals its children with a soft de-blur + fade as they scroll into view — the 'text develops into focus' effect. Fires once, respects reduced-motion, and is polymorphic via `as` so it can wrap a heading, paragraph, or a single list item.
- MacBook MockupA MacBook whose lid tilts open as it scrolls into view, revealing whatever you pass as `children` on the screen. The screen UI is authored at a fixed 900px design width and uniformly scaled to fit — so it never reflows across breakpoints. Reduced-motion users get the lid already open.
- Product MockA 'your product, running' analytics dashboard mock — an agentic SEO console with a chat launcher, a recommendations queue, growth pacing, and a live status bar. Authored at a fixed 960×540 design box and uniformly scaled to fit, so the dense UI stays crisp and never reflows. Themeable accent, ships with no image assets (the mark is inline SVG).
- Iso SearchIsometric illustration — a magnifying glass floating over a grid of opportunity dots, with a radar sweep inside the lens. Themeable accent via `brand`; animation stills under reduced-motion.
- Iso PriorityIsometric illustration — a stack of iso cards with the top (priority) card lifting off and pinned, signalling a selection. Themeable accent via `brand`; reduced-motion aware.
- Iso DeployIsometric illustration — an iso cube 'system' with a pulsing status light, shipping small chips out along the iso-up axis. Themeable accent via `brand`; reduced-motion aware.
- Iso GrowthIsometric illustration — ascending iso bars with a rising curve threading through their tops, looping to suggest compounding growth. Themeable accent via `brand`; reduced-motion aware.
- Process IsometricAn 'autonomous system' process section — four isometric dioramas laid out as numbered steps with a continuously-running badge. Light-mode, amber accent, Pixelify display type; each step reveals on scroll. Composes the iso-* illustrations and text-reveal.
- Hero AgentMarketing hero for an AI/agent product — a badge, a staggered de-blurring display headline, dual CTAs, and a live product dashboard below, over a soft illustrated backdrop. Self-contained theme (amber accent via `brand`, Pixelify display font loaded by the block); light-mode. Composes the product-mock component. Drop your own backdrop at `/hero5.webp` or pass `backgroundImage`.
- Pain PointsThe 'problem' section for a marketing page — a grid of pain-point cards, each with an animated mini-visual that plays on scroll, closing on a rotating 'nothing compounds' finale. Self-contained theme (amber accent via `brand`, Pixelify display font loaded by the block); light-mode. Composes text-reveal.
- Outcome FeaturesAn 'outcomes, not dashboards' feature section — a row of outcome cards, each with a small animated proof-of-value visual (a task list, a cited paragraph, an AI-visibility panel). Self-contained theme (amber accent via `brand`, Pixelify display font loaded by the block); light-mode. Composes text-reveal.
- Setup StepsA 'set it up once, let it run' onboarding section — a MacBook whose screen holds three numbered steps that animate in on scroll, each with a small product mock (connect / analyze / approve). Self-contained theme (amber accent via `brand`, Pixelify display font loaded by the block); light-mode. Composes the macbook-mockup and text-reveal.
- Stats CTAA closing stats + CTA band — a live-results strip with count-up metrics over a soft illustrated backdrop, then the final 'Stop doing SEO / Start running it' call to action. Self-contained theme (Pixelify display font loaded by the block); light-mode. Composes text-reveal. Drop your own backdrop at `/footer.webp` or pass `backgroundImage`.
- Agentic LandingA complete landing page for an AI/agent product, assembled from the agentic blocks: navbar → hero → problem → autonomous system → outcomes → setup → closing CTA → footer. `brand` + `label` props thread the amber accent and wordmark through every section; light-mode, motion-rich, self-contained theme. Install it and every block + component comes with it.
- Navbar AgentMarketing navbar for an AI/agent product — a starburst wordmark, hover-dropdown links, a primary CTA with a light sweep, and an animated mobile sheet. The bar fades to blurred glass as you scroll. Self-contained (the logo is inline SVG, no image assets); wordmark via `label`. Sits fixed over a light hero.
- Footer AgentMarketing footer for an AI/agent product — a brand column with blurb + social links, three link groups, and a copyright/status row over a faint grid. Self-contained (the logo is inline SVG, no image assets); social-hover accent via `brand`, wordmark via `label`. Light-mode.
- ReasoningThe collapsible "thinking" trace from AI chat UIs — shimmers while streaming, then auto-collapses to a summary. Height animates with the grid-rows technique (no JS measurement), and it stays fully accessible and dependency-light.
- Tool Call TimelineThe collapsible agent trace from AI product UIs — nested tool calls with running / done / failed states, a live duration counter, and per-call results. Recursive tree layout with a connector spine; expand/collapse animates height via the grid-rows technique (no reflow flicker).
- Citation CardsInline source markers with hover cards, the way AI answers footnote their claims. The card is portaled and collision-aware — it flips above the marker near the viewport edge and shifts to stay on-screen with its arrow still pointing home. Hovering a marker or its source row syncs both ways, and it's fully keyboard-navigable.
- Scroll StoryA scrollytelling section — a pinned visual holds the viewport while steps scroll past and the visual switches to match. Continuous scroll becomes discrete, jitter-free steps via one rAF-throttled handler; the progress rail is scrubbed straight to the DOM, so smooth scrolling never re-renders. Sticky-based (no scroll-hijacking), reduced-motion aware, and it degrades to inline figures on mobile.
- Compare SplitTwo model answers side by side in resizable, scroll-synced panes — the view for A/B-ing completions to one prompt. Hand-built (no libraries): a draggable role=separator with pointer capture and keyboard nudging, and proportional scroll sync guarded by a one-shot ignore flag so the two panes never stutter in a feedback loop. Fully keyboard-accessible and monochrome.
- Command PaletteThe ⌘K launcher, hand-built. Focus is captured on open and restored on close, Tab is trapped, and the list is driven by aria-activedescendant so focus never leaves the input. Typing re-ranks commands with a FLIP animation — rows glide to their new positions instead of snapping — and a debounced async 'actions' section runs a simulated remote search with derived loading. Keyboard-first, portaled, and monochrome.
- Optimistic QueueA list whose archive action applies optimistically — the row collapses the instant you click, before the request resolves. Success drops it; failure rolls it back, expanding it right into place. The trick: rows are never unmounted on the optimistic step, only after the request confirms, so the exit animation can reverse mid-flight with no re-mount gymnastics. A live queue tracks in-flight actions. Keyboard-accessible and monochrome.
- Streaming MarkdownRenders markdown from a string that grows as it streams, with a caret trailing the last glyph. Re-parses the whole string each render into stable, index-keyed blocks so React updates text in place — earlier content never re-mounts, keeping selection and scroll intact while tokens arrive. Unclosed constructs degrade gracefully (an open ``` is already a code block; a dangling ** stays literal until it closes). Hand-written parser, no markdown dependency; monochrome and reduced-motion aware.
- Prompt ComposerThe chat input from AI apps: a textarea with a caret-anchored @-mention menu, wrapped by controls that all read and write one value. The menu is positioned with the mirror-div technique — a hidden div copies the textarea's typography and box metrics so a marker span reveals the exact caret pixel, then the portaled menu sits just below it. Model, temperature, tools, attachments, and text are one state object; every widget is controlled from it, and the composed payload is shown live. Keyboard-first and monochrome.
- Log StreamA live log/event viewer that stays smooth at tens of thousands of rows and tails output like a terminal. Hand-written fixed-height virtualization renders only the slice around the viewport, offset with one translateY over a full-height spacer, from a rAF-throttled scroll handler. It sticks to the bottom while you're pinned to the tail and lets go the moment you scroll up — counting unseen lines and offering a jump-to-latest pill. Filter, pause, and clear included; monochrome.
- Diff ViewerThe review UI for an AI edit: a real diff between two versions with word-level highlights and per-hunk accept/reject you can drive from the keyboard. The engine is an actual longest-common-subsequence diff (DP + backtrack) run over lines to find changed regions, then again over the words of a changed line pair to highlight exactly what moved. Each hunk resolves to its new side (accept) or old side (reject); the composed document is handed back via onResolve. Arrow/j/k move, a/r/u resolve, and the active hunk scrolls into view. Monochrome and dependency-light.
June 2026
18 new- NavbarA responsive marketing navbar with logo, links, auth + CTA buttons, and a mobile menu toggle.
- Feature GridA three-column feature section with hairline dividers, icon tiles, and concise copy.
- Bento FeaturesAn asymmetric bento grid for highlighting features at different weights — a wide hero cell plus supporting tiles.
- TestimonialsA two-column grid of testimonial cards with quotes, initials avatars, and attribution.
- StatsA four-up metrics band with large numerals and labels, divided by hairlines.
- Logo CloudA 'trusted by' band of wordmark logos that brighten on hover — drop in your customers' names.
- FAQ AccordionAn accessible FAQ built on native <details> — keyboard-friendly, no JavaScript, with an animated open indicator.
- FooterA multi-column marketing footer with link groups, wordmark, and a social + copyright row.
- SaaS Landing PageA complete, production-ready SaaS landing page — navbar, hero, logos, features, bento, stats, testimonials, pricing, FAQ, CTA, and footer — assembled from the blocks. Install it and every block and component comes with it.
- ButtonA polymorphic button with five variants and four sizes, built on Radix Slot so it can render as any element via `asChild`.
- Spotlight CardA surface that reveals a soft radial spotlight tracking the cursor. Pure CSS variables — zero re-renders per mouse move, no animation library.
- DialogAn accessible modal dialog on Radix primitives — focus trap, scroll lock, escape-to-close, and animated enter/exit out of the box.
- Shimmer ButtonA primary button with a light sheen that sweeps across on hover. Self-contained — the effect is a CSS pseudo-element, no keyframes or dependencies.
- BadgeA compact status label with solid, soft, outline, and accent variants. Drops an icon in cleanly.
- SwitchAn accessible on/off toggle built on Radix Switch — keyboard operable, with a smooth animated thumb.
- Centered HeroA centered marketing hero with a badge, headline, subtext, and dual CTAs over a masked dotted grid. Drops onto any landing page.
- Three-Tier PricingA responsive three-column pricing section with a highlighted 'most popular' plan, feature checklists, and per-tier CTAs.
- CTA BannerA high-contrast call-to-action band on an inverted surface with a soft halo and two actions. The closer for any landing page.