Components(291)

Design system primitives: buttons, badges and other building blocks our sections are composed from. Install one and reuse it across your whole project.

Wave Gradient

A live WebGL gradient of layered color bands: two to nine ribbons stacked across the frame at an angle, each edge a pair of slow sine swells that roll at its own pace, blended softly into the next band in Oklab so every seam stays clean and bright. A shade under each edge makes the ribbons read as layered, a soft crest of light runs along them, and a fine film grain sits on top. Colors, angle, band count, amplitude, frequency, speed, softness, glow, depth, saturation, grain and seed are all props; new colors fade through and a new wave shape eases in over a set time, and the bands lift into a soft swell under the cursor. It rises softly out of its first color on load, adapts its resolution to the device, pauses offscreen, holds a still frame for reduced motion and falls back to a stepped CSS gradient without WebGL.

Vortex Gradient

A live WebGL whirlpool of color: up to six colors wound into a logarithmic spiral that turns and pulls toward its center, blended in Oklab so every mix stays clean. Fractal ripples fray the arms, the pit darkens as it falls away, and an optional bright eye glows at the heart, all under a fine film grain. Colors, base, arm count, tightness, spread, depth, turbulence, eye, center position, direction, speed, saturation and grain are all props; a new palette fades through over a set time, and the center leans gently toward the cursor. It grows softly out of its base color on load, adapts its resolution to the device, pauses offscreen, holds a still frame for reduced motion and falls back to a CSS conic sweep without WebGL.

  • app
    • layout.tsx
    • page.tsx
    • tour
      • page.tsx
      • dates.json
  • .env
  • package.json
  • README.md

Tree View

A file explorer tree built on the full WAI-ARIA tree pattern: folders open and close with a height animation and a spring on the chevron, indent guides run under every open folder and the branch holding the focus lights up, and each file gets an icon from its extension. Arrow keys walk the tree, Right and Left open, close and climb, Home and End jump, `*` opens every sibling folder and typing a name jumps to it. Single or multiple selection with Shift ranges and Cmd or Ctrl toggles, controlled or uncontrolled expansion and selection, and optional actions at the end of each row.

  • data: {10 keys}
    • artist: "Joni Mitchell"
    • tour: "Blue, Revisited"
    • year: 2026
    • onSale: true
    • support: null
    • manager: {3 keys}
      • name: "Elliot Roberts"
      • email: "hello@beste.co"
      • phone: "+1 310 555 0142"
    • dates: [4 items]
    • setlist: [12 items]
      • 0: "All I Want"
      • 1: "My Old Man"
      • 2: "Little Green"
      • 3: "Carey"
      • 4: "Blue"
      • 5: "California"
      • Show 6 more (6 left)
    • band: [3 items]
    • rider: {2 keys}
      • piano: "Steinway D"

Tree JSON

A JSON viewer on the tree family's pattern: objects and arrays open and close with a height animation and a spring on the chevron, closed ones show a preview like {3 keys} or [12 items], and values are colored by type with strings, numbers, booleans and null each told apart in light and dark themes. Long arrays arrive in chunks behind a Show more row, a search field highlights matching keys and values, opens their parents and reaches into chunked arrays, and every row copies its value or its path, written the way you would in code (data.dates[2].city). Values stay selectable. The whole viewer is a WAI-ARIA tree: arrow keys walk it, Right and Left open, close and climb, `*` opens every sibling, and Cmd or Ctrl + C copies the focused value (with Shift, its path).

Setlist
Search songs and venues
Hounds of Love3:02
Running Up That Hill4:58
Cloudbusting5:10
Wuthering Heights4:28
Kate Bush, Hammersmith Odeon, 12 songs

Tour Spotlight

Onboarding coach marks: the page dims around a rounded cutout that frames each step's target, the cutout glides to the next target on a spring and the target scrolls into view, while a step card sits beside it and flips to whichever side has room. Back, next, skip and finish buttons, progress dots you can jump with, arrow keys and Escape, focus held in the card and handed back afterwards. Targets are CSS selectors or refs and are tracked through scrolling and resizing; the tour can dim the whole viewport or only its own box, let clicks through to the target, and be controlled or left to itself.

Toolbar

A floating pill toolbar built from compound parts: buttons, toggles, one-of-many and any-of-many toggle groups, and separators. One highlight slides under whichever item the pointer or keyboard is on, and one tooltip rides along with it showing the label and the shortcut as key caps, drawn for the platform (⌘ on a Mac, Ctrl elsewhere). Arrow keys, Home and End move through the bar as a single tab stop, in a row or a column.

Mastered by Nils Frahm

Time Relative

A relative timestamp that reads "just now", "3 minutes ago" or "in 2 days" in any locale through Intl.RelativeTimeFormat, and keeps itself current on one clock shared by every timestamp on the page: every second under a minute, every minute under an hour, hourly after that, and paused while the tab is hidden. It sits in a real time element with the full date and time on hover, switches to a short date past a threshold, and can reserve the width of the longest wording in its unit so the text beside it never shifts as it ticks. The server renders a stable date and the live wording fades in after mount. Long, short and narrow wording, three tones and three sizes.

Time Countdown

A countdown to a date or through a duration, drawn as unit tiles whose digits roll down on the beat of each second, 9 wrapping cleanly from 0. Units are chosen per use and leading zero units can drop away, labels come from the locale in long, short or narrow form, and a message can replace the digits when time is up. It renders a stable placeholder on the server, pauses while the tab is hidden, announces the time left once a minute rather than every second, and fires onComplete once. Three tones and three sizes.

  1. Upload stemsWAV or AIFF, one file per track, Completed
  2. Set the mixLevels, pan and a reference, Completed
  3. MasterLoudness and final polish, Current step
  4. ReleaseArtwork, credits and stores, Not started

Steps Track

Multi-step progress as an ordered list: a numbered marker per step, a title and an optional description, laid out as a row or a column. As `current` advances, the line between the markers fills segment by segment on a spring and each finished number turns into a check that draws itself in; stepping back empties it the other way. Steps can also be marked as needing attention or skipped. Completed steps (or every step) can be made pressable to jump back, the current one carries `aria-current="step"`, and every state is spelled out for screen readers.

Launch the band site

2 of 5 done

Five steps before the autumn tour goes on sale.

  • Photos, a short bio and the lineup.

  • A preview player goes on the home page.

  • Twelve shows so far, from Lisbon to Oslo.

  • Connect payments and list the first shirts.

  • Fans get a note at hello@beste.co when tickets drop.

2 of 5 done

Steps Checklist

An onboarding checklist card: a ring beside the title fills as items are checked and reads "3 of 5 done", the next open item is highlighted with its description and an action button or link, and finished items fold to a single struck-through line while a check draws itself in their box. When every item is done the ring completes in green with a check, the title cross-fades to a finished one and an optional Dismiss button appears. The whole list collapses under its header, completion can be controlled or left to the card, and each item is a real checkbox for keyboards and screen readers.

Public APIOperational99.96%
90 days agoToday

Status Uptime

Service row for status pages and dashboards: a status dot that pulses softly while something is wrong, the service name, its current status and the uptime over the days on screen, above a strip of daily bars colored by each day's worst status. Hovering or focusing a bar shows the date, that day's uptime and its incidents; the strip is one tab stop with arrow keys between days, and narrow rows drop their oldest days instead of squeezing the bars.

npm install motion lucide-react

Snippet Install

An install command block with a tab for each package manager: npm, pnpm, yarn and bun, or any subset in any order. The command is derived from the packages, a dev flag and whether they are installed or run once (npx, pnpm dlx, yarn dlx, bunx), or given exactly per manager. A marker slides between the tabs on a spring, and the reader's pick is remembered and shared by every snippet on the page and across visits. The copy button morphs into a check and announces itself, and a long command scrolls sideways instead of wrapping.

Smoke Gradient

A live WebGL gradient of colored smoke: soft plumes rise from the bottom edge, widen as they climb, curl through a fractal flow and thin out near the top, over a low haze along the floor. The smoke is colored by a gradient ramp from the base of each plume to its tip, blended in Oklab, under a fine film grain. Colors, base, density, plume count, height, rise speed, curl, softness, scale, saturation, grain and seed are all props; a new palette fades through over a set time, and the smoke parts gently around the cursor. It grows softly out of its base on load, adapts its resolution to the device, pauses offscreen, holds a still frame for reduced motion and falls back to soft CSS plumes without WebGL.

Signature pad is empty

Signature Pad

A canvas for capturing a signature: strokes are smoothed into curves through their midpoints and run thick on slow movement and thin on fast, like ink, or follow real pen pressure on a stylus. Points are stored as fractions of the pad's width, so the signature survives any resize on a crisp, pixel-ratio-correct canvas. A dashed baseline and a faint placeholder guide the signer; undo (also Cmd or Ctrl + Z) and clear sit below. Export helpers return an SVG string or a PNG data URL, and a ref exposes clear, undo, isEmpty and both exports.

Before the session

Joni Mitchell tuned every guitar to its own open tuning, so the first hour of a session was spent on strings rather than songs.

Engineers learned to leave that hour alone. It set the room, the tempo of the day and which instruments would be in reach.

Choosing the room

A dead room keeps the voice close. A live one lets the guitar ring into the corners and come back a little late, which is its own kind of harmony.

Microphones

One ribbon above the sound hole, one condenser near the twelfth fret, and a single valve microphone for the voice, set a hand apart from the lips.

Tracking

Most takes were full performances. Stopping to punch in a line broke the thread of the tuning and the song together, so the band played through.

When a take was close, the next one was usually worse. The rule became three passes, then a walk around the block.

Headphone mixes

Every player had their own mix, and every mix had more of the voice than anyone admitted in the control room.

Mixing

The mix was a matter of taking things away. Reverb was the room itself, and anything added later had to sound as if it had always been there.

Tom Waits once described a good mix as the moment you stop hearing the speakers. That was the only test that mattered.

Tape and air

Half-inch tape at thirty inches per second kept the top end open. The hiss was part of the record, like the paper under a drawing.

Afterwards

The reels went into a cupboard labelled with the date and a single word for the mood of the day. Years later, those words were still right.

Some of the best songs on the record were the ones nobody planned to keep.

Scroll TOC

A table of contents that follows the reader: the current section is the last heading past a line near the top (the last one once the page bottoms out, the topmost in view before any has passed), and a marker slides and resizes onto it along a thin rail. Entries come from an items list, from headings collected out of a container, or from the content passed as children, which lays the list and its own scroll area side by side. Clicks scroll smoothly, respect scroll-margin, move focus to the heading and hold the marker steady while the page travels; deeper levels indent and can collapse to the current section. Works on the page or inside any scroll container.

Ripple Gradient

A live WebGL ripple gradient: concentric rings spread from a few slowly wandering points like drops on still water, each ring carrying the next color of the palette outward, blended in Oklab over a calm base color. Where rings from different sources meet they reinforce and cancel, and they fade with distance. Colors, base, source count, ring density, speed, softness, decay, interference, intensity, saturation and film grain are all props and a new palette fades through over a set time. On load the rings spread out of the flat base; it adapts its resolution to the device, pauses offscreen, holds a still frame for reduced motion and falls back to CSS rings without WebGL.

Monthly revenue
$48,290+12.6%, an improvement
Compared with August

Readout Stat

A KPI readout: a label, a big figure written with Intl.NumberFormat (number, currency, percent or compact, in any locale) whose digits roll into place like an odometer whenever the value changes, a delta chip that knows whether up is good news, an inline sparkline that draws itself in and ends on a dot in the verdict's color, and an optional caption. The written figure is read out once for screen readers; the rolling columns are decoration. Three tones and three sizes.

Streams: 1.3M in Sep 2026, up 12%, an improvement from 1.1M in Aug 2026.

  • Spotify: 742.1K, up 8.9%, an improvement from 681.4K.
  • Apple Music: 298.2K, down 1.2%, a decline from 301.9K.
  • Bandcamp: 96.4K, up 34.3%, an improvement from 71.8K.

Joni Mitchell, every release

Readout Compare

One metric across two periods: the label and a delta chip that knows whether up is good news, the current figure written with Intl.NumberFormat beside the one it is compared with, and a pair of bars on one scale, this period solid and the earlier one faint, that grow in from the left on a soft ease-out. Optional breakdown rows compare further metrics the same way, each with its own twin bars and chip, and each row can have its own format and direction. The comparison is read out once as a sentence for screen readers. Three tones and three sizes; it shares its number formatting with readout-stat.

Reaction Rating

A star rating for reviews, feedback and track ratings: stars fill up to the pointer as a preview (by halves, with `allowHalf`), a click sets the rating and gives the star it lands on a small pop, and clicking the same rating again clears it. The keyboard gets a native range under the stars: arrows, Home and End step through it, number keys jump straight to a rating and Backspace clears. As a read-only display it fills fractionally, so 4.3 fills 30% of the fifth star, and it can write the value and the number of ratings beside the stars ("4.3 (1,284)"). Any icon can replace the star, in amber, the primary color or the foreground.

Smileys

People

Animals and nature

Food and drink

Music and activities

Travel and places

Objects

Symbols

Reaction Picker

An emoji picker panel for reactions, comments and messages, built to sit inline or inside a popover. A search field filters a built-in set of about 380 common emoji by name and keywords; category tabs with icons scroll the grid and follow along as it scrolls, with a marker that slides between them. A Recently used row is remembered in localStorage, a skin tone row applies one of the five modifiers to every emoji that takes it, and a preview bar names the hovered or focused emoji. The grid is fully keyboard driven, with arrows moving by row across sections, and each cell has a fixed size so the panel is exactly as wide as its columns.

Reaction Bar

Emoji reaction pills with counts for comments, posts and messages: pressing a pill adds or removes your own reaction, with a small burst of particles as it lands and the count rolling up or down from the side it moves toward. Hovering or focusing a pill names who reacted ("You, Nina Simone and 9 others"), and a "+" button opens a compact emoji grid for a new reaction, which arrives as a pill of its own. Each pill is a real toggle button with `aria-pressed` and a spoken label, and it works controlled or uncontrolled.

QR code for https://beste.co

QR Code

A QR code generator with no dependencies: text is encoded as UTF-8 bytes into the smallest version from 1 to 40 that fits, with Reed-Solomon error correction at L, M, Q or H and the mask the standard's penalty rules pick. Drawn as one crisp SVG path in square, flowing rounded or dotted modules, with square, rounded or circular corner eyes, any colors (tokens included) and a configurable quiet zone. A centered logo sits on a cleared plate and raises the error correction to H on its own. Exports the encoder, an SVG string builder and a PNG download helper.

Prism Gradient

A live WebGL gradient of light split through a prism: a thin white beam enters from one side and leaves as a few soft fans of dispersed color, each running its palette edge to edge, with caustic streaks flowing along the beams, a slow sway and a bloom around the prism. The fans can use a custom palette, a physical rainbow or any mix of the two; dark bases glow, light bases take the light as a tint. Colors, spectrum mix, base color, beam count, spread, angle, prism position, bloom, sharpness, caustics, the white beam, speed, saturation and film grain are all props, and a new palette fades through over a set time; the prism eases a little toward the cursor. On load the beams reach out of the flat base color over 2.4 seconds. It adapts its resolution to the device, pauses offscreen, holds a still frame for reduced motion and falls back to a CSS color fan without WebGL.

$12, per month

Price Toggle

A billing period switch for pricing sections: a thumb slides between Monthly and Yearly (or any periods you pass) on a soft spring, measured from each label so any length fits, and a savings badge like "2 months free" turns green and pops when its period is picked. It renders whatever you pass as children with the picked period, so a price-tag underneath follows it and its digits roll. Built from native radios, so arrow keys, forms and screen readers work as they do in any radio group. Three tones and three sizes.

Markdown version