hyperblur

Components

277 copy-paste items. Charts, lists, sidebars, dashboards, app screens, agent UI and website elements.

Components · 53View all

FilesTue 9:41
Lisbon
21°

Dock

A macOS-style dock whose icons swell smoothly as the cursor passes over them, with a label tooltip on each.

↗
Ondine Studio · 2019 – 2026
Selected work for curious brands

Pill Nav

A horizontal nav with a single pill that glides to the hovered or selected item.

↗
Help centerShipping

Same day if you order before 2 pm.

Yes, within 30 days, no receipt needed.

Accordion

Expandable sections whose panels animate their height with a rotating chevron. Single or multiple open.

↗
Lisbon
4 nights
from $420
Reykjavík
6 nights
from $780
Marrakesh
5 nights
from $510

Carousel

Scroll-snap slider with arrow buttons, dot indicators, keyboard control and optional autoplay.

↗
  1. Cart
  2. 2Shipping
  3. 3Payment
  4. 4Review

Express to Lisbon, arrives Thursday

Stepper

Multi-step flow with numbered progress, a line that fills as you advance, and sliding step content.

↗
RawGraded

Image Compare

Before and after slider. Drag the handle or use the arrow keys to reveal either side.

↗
Dune
Tide
Bloom
Moss
Dusk
Steel

Masonry

Responsive column layout for mixed-height blocks, with a staggered entrance.

↗
AP
Ada Park9:41
Q4 roadmap draft is ready for review
OH
Omar Haddad9:12
Pushed the checkout fixes to staging
LB
Lena Brooks8:57
Lunch at Rossio? Booking for four
KM
Kenji MoriMon
Invoice #2041 has been paid
SL
Sara LindSun
New brand photos are in the drive

Animated List

Keyboard-friendly list with a staggered entrance, a sliding highlight and scroll fades.

↗
Realtime sync
Edits land in 40 ms
Uptime
SSO
API

Bento Grid

Bento layout of spanning cards with a cursor spotlight and a hover lift.

↗

Dune Hour

Erg Chebbi, the last light before dusk

Gallery Showcase

A large featured image above a row of thumbnails. Picking a thumbnail crossfades the feature with a slow settle, slides the caption in and restarts the autoplay progress.

↗

Gallery Archive

A typographic archive index of year, title and type. Hovering or focusing an entry dims the other rows and shows a floating image preview that trails the pointer.

↗

Dune Hour

NO. 01 / ERG CHEBBI

Gallery Backstage

A dark stage with the images standing in a row. A soft spotlight cone picks out the active one while the rest wait dimmed behind; drag across the stage, click or use the arrows to move the light.

↗
Location shortlist6 places

Gallery Grid Expand

A grid of image cards. Opening a card grows it from its own spot to fill the grid with the title and caption; Back or Escape shrinks it back into place.

↗

Glacier Line

Ambient, 38 min

Gallery Coverflow

A classic cover flow: the center image faces you while the others turn away in 3D and stack to each side, with a soft reflection on the floor. Drag, click a side image or use the arrow keys.

↗

Erg Chebbi at dawn

Roll 14, Portra 400

01 / 06
01 ▸ 01A
02 ▸ 02A
03 ▸ 03A
04 ▸ 04A
05 ▸ 05A
06 ▸ 06A
01 ▸ 01A
02 ▸ 02A
03 ▸ 03A
04 ▸ 04A
05 ▸ 05A
06 ▸ 06A
01 ▸ 01A
02 ▸ 02A
03 ▸ 03A
04 ▸ 04A
05 ▸ 05A
06 ▸ 06A

Gallery Filmstrip

A strip of film with sprocket holes and edge numbers drifts under a center gate, and the frame in the gate is projected large in the viewer above.

↗

Gallery Rail Hang

Prints hang from a clothes rail on small hangers and swing like pendulums when the pointer brushes past or the rail is dragged. Clicking one pulls it forward.

↗

Low Tide

Marlow Keys, 2026

Gallery Coverflow Lights

A cover flow where the active image throws soft colored light onto the stage while the neighbors turn away into the dark.

↗

Gallery Scatter

Polaroid-style prints lie scattered at loose angles. Drag any of them to the top of the pile, or tidy the whole table into a neat grid.

↗

Now passing

Dune No. 4

Archival print, 40 x 50 cm

1/6

Gallery Runway

Framed images walk toward the viewer along a lit runway in 3D, growing and stepping aside as they pass. Hovering a frame stops the flow.

↗

Coastal route

8 photos

Click a photo to open it full screen

Carousel Lightbox

A thumbnail strip where each image opens in a lightbox. The picture zooms out of its thumbnail and flies back on close, with previous and next, Escape and a focus trap.

↗
Morning ferryCold light over the harbor
Slide 1 of 8

Carousel Page Count

A swipeable carousel with a rolling two-digit page counter, a progress hairline and arrow buttons that disable at both ends.

↗
01 / 08

Carousel Scrubber

A card carousel with a draggable scrubber under it. Dragging moves the track continuously and releases onto the nearest stop. Arrow keys step between stops.

↗
Notifications3
  • Deploy finishedweb-app is live on production
    now

Card Stack Expand

Notification cards stacked with depth. Hover, focus or the Expand button spreads them into a list, and each card dismisses with a swipe or its close button. New cards drop in from the top.

↗
  • Review the pricing page copy
  • Send invoice to Northwind
  • Book flights for the offsite
2tasks left

Animated Todo List

A task list with an add field, a check mark that draws itself, a strike-through that sweeps across the text, collapsing delete and up and down reordering that glides into place.

↗

Shared Layout Modal

Cards that grow into a modal and shrink back into the same spot. The card morphs by measuring its box, the content crossfades, and everything stays inside its own frame.

↗

Connect a repository

Pick where your site lives.

fernhill/storefrontSelected
fernhill/journalSelect

Direction Switch

Switches between views with tabs or steps. Moving forward slides content to the left, moving back slides it to the right, and the container height eases to the new view.

↗
Winter field guide5 trips

Image Accordion Reel

Landscape panels that open one at a time on a story-style timer, with segmented progress at the top. The ridges of each scene slide into place as its panel widens, and hovering pauses the reel.

↗

A row house opened up with five plaster arches.

View project

Image Accordion Vertical

Stacked bands that open like an aperture: the image stays fixed while the band grows from its center, so more of the scene is revealed rather than scaled. Each open band shows a description and a project link.

↗

Image Accordion Stagger

Product panels set at staggered heights with titles running up their edges. The open panel levels out, its title swings from vertical to horizontal on a spring and the product rises into view.

↗

Live workspace

Every metric in one live view.

Revenue, deploys and signups, as they happen.

Parallax Depth Cards

A headline surrounded by floating interface cards on several depth planes. As you scroll, near cards travel further and stay sharp while far cards drift slowly, blurred and dimmed.

↗
01 / 04

  1. Cover glass

    Sapphire that shrugs off keys

    A 0.4 mm sapphire window with an anti-glare coating sits flush with the frame.

  2. Lens stack

    Seven elements, one focal plane

    Aspherical glass keeps corners sharp at f/1.8 from edge to edge.

  3. Sensor

    A 1-inch stacked sensor

    Larger pixels collect 2.3 times the light, so night shots stay clean.

  4. Logic board

    Processed before you lift a finger

    A dedicated image core merges nine frames in under 40 ms.

Parallax Sticky Captions

A pinned exploded view beside captions that scroll past. The view pans and zooms to the part each caption describes and lights it up, with a progress rail tracking the walkthrough.

↗

Field notes / 48 photos

The coast at the edges of the day

Parallax Floating Gallery

A tilted wall of photographs in columns that drift in opposite directions at different speeds as you scroll, around a pinned title and call to action. Tiles lift and show their caption on hover.

↗
Northwind SummitLisbon / 14-16 May 2027
All access

Maya Lindqvist

Speaker, Hall B
NWS-0427-118
Tilt to catch the foil, click to flip

Card Foil Pass

An event pass with a holographic foil pattern, a rainbow seal and engraved lines that catch the light as the card tilts toward the pointer. Click or press Enter to flip it to a scannable back.

↗
Pick a board

Card Hand Fan

A loose pile of cards that fans into an arc like a hand of playing cards. Hovered cards rise and push their neighbors aside, and picking one lifts it to the front while the rest fold back.

↗

Lisbon

Portugal / 14:20

22°
Clear, light wind22°Mon23°Tue21°Wed24°Thu25°Fri
01 / 06

Card Flip Deck

A rolodex of city cards where the front card flips over its top edge to reveal the next. Flip with a click, the wheel, a vertical drag, arrow keys or on a timer.

↗

Field notes

12 places / 2026

Gallery Infinite Spiral

Images laid out along a spiral that drifts forever, growing and brightening as they leave the center. Drag, scroll or use the arrow keys to move along it.

↗
Aurora BasinIceland

Carousel Depth

A carousel in perspective: the active card is large and sharp while its neighbors turn away, shrink and dim. Supports drag, arrows, dots, keyboard and autoplay that pauses on hover.

↗
AlarmWake at 6:45 AM
1
2
3
4
5
6
7
8
9
10
11
12
00
05
10
15
20
25
30
35
40
45
50
55
AM
PM

Wheel Option Picker

A vertical drum picker. Options sit on a cylinder in perspective and snap to the center after a drag, flick, wheel step or key press. Set the text size with style or className on the picker.

↗
Aksel & Moa

Copenhagen / Est. 2014

Rooms that
breathe.

Menu Staggered

A full-frame menu that slides in as three layered panels, then reveals its links one by one. The hamburger morphs into a close icon, Escape closes it and focus stays inside.

↗

Ship the interface
your product deserves.

Open components for React and Tailwind.

Nav Card Expand

A compact top bar that unfolds downward into a card with three link cards and a call to action. The panel floats over the page, so nothing below it moves.

↗
Edge network
Live

99.98%

uptime over the last 30 days

fra1iad1sin1syd1

Card Border Glow

A card whose border lights up in the segment nearest the pointer, with a soft bloom spilling both outside and inside. While idle the glow slowly circles the border.

↗

Traffic

Visits this weekUp 18% on last week

Crew

MRMaya Rao
LKLeo Kim
SASana Ali
Online nowThree editing live

Alerts

Rules enabledThree of four on

Latency

p95 response112 ms, down 9%

Bento Pointer Glow

A three-column bento grid where one cursor-following glow lights every tile border and surface. Tiles lift on hover or focus and swap their description for a secondary caption; built-in visuals animate on their own.

↗

All systems steady

12 services reporting, 0 incidents

Gooey Nav

A pill navigation whose active indicator is a gooey blob. Three blobs with different timings stretch and merge through an SVG filter as the selection moves. Arrow keys, Home and End change the selection.

↗
Departs 21:15

Aurora Night Train

Tromso to Narvik, 6h 40m

Card Glare

A poster card that tilts slightly toward the pointer while a specular band and a lit edge slide across its surface.

↗
No. 014 / 120Holo

Mira Kovac

Staff Designer, Lumen

@mirak

148Shipped
2.4kReviews
61dStreak

Profile Holo

A profile card with a foil layer whose rainbow shifts with the pointer angle, an initials avatar and a stats row.

↗
Available May 1

Sunroom studio, Lisbon

38 m2, south facing, from 1,450 / month

Pixel Hover

A canvas card whose picture breaks into a grid of pixels in a wave that starts where the pointer enters, then reforms on leave.

↗
Night shift 03

Neon Harbor

Container cranes, rain and 4 a.m. light

Card Decay

A card whose image follows the pointer on a spring and swings with its speed, while a large title and an outlined echo trail behind it.

↗

Ship it

Friday release

Sticker pack 02

Laptop lid, but make it loud

Drag the corner to peel. Click to stick it back.

Sticker Peel

A die-cut sticker on its backing sheet. Drag to peel a corner and reveal the backing, click or press Enter to peel or reset.

↗

Bounce Stack

A tight pile of rotated cards that fans out with an overshooting bounce on hover or focus and settles back on leave.

↗
412

Ada Okafor

Core runtime

186

Ben Hartley

Docs and DX

304

Chloe Tran

Design system

97

Dario Silva

Build tooling

228

Elin Berg

Accessibility

351

Farah Nasser

Release lead

Chroma Grid

A grid of cards that stays grayscale except under a soft spotlight that follows the pointer, where each card lights up in its own accent.

↗

Gallery Accordion

A row of image panels where the hovered or focused one grows wide and the rest fold into slim strips with vertical labels.

↗
No. 01 Tide pool
No. 07 Harbor fog
No. 13 Marigold
No. 02 Salt flat
No. 08 Neon alley
No. 14 Underpass
No. 03 Night market
No. 09 Dune line
No. 15 Orchard
No. 04 Rooftop 04
No. 10 Glasshouse
No. 16 Ferry wake
No. 05 Basalt
No. 11 Paper lanterns
No. 17 Moth light
No. 06 Cedar light
No. 12 Slate steps
No. 18 Concrete bloom

Drift Wall

A wall of tiles in columns that drift against the pointer at different depths, with the hovered tile lifting forward.

↗
Prompt 01

Slow mornings

Write down one thing you noticed before checking your phone.

Card 1 of 5: Slow mornings

Stack Drag

A deck of cards where you drag or flick the top card away with momentum and it drops to the back. Arrow keys cycle too.

↗

Website elements · 16View all

Navbar Glass

A frosted glass navbar with a sliding hover pill, a keyboard-navigable mega menu and a hamburger layout that takes over in narrow containers.

↗

Footer Columns

A full website footer with a brand blurb, social buttons, link columns, a newsletter mini-form, legal links and a live status pill.

↗
Live cursors are hereSee more

Announcement Bar

A slim banner that rotates through messages with a vertical slide, pauses on hover and can be dismissed.

↗

Your privacy

Pick which cookies you want to allow.

  • NecessarySign-in, security and load balancing. Always on.
  • AnalyticsAnonymous usage stats that help us improve pages.
  • MarketingMeasures campaigns and personalizes ads.

Cookie Banner

A consent card with Accept all, Reject non-essential and a Customize panel of category switches. It slides up on mount.

↗

Field notes, every Friday

Slow travel and small cameras.

One email a week. Leave any time.

Newsletter Signup

An email capture block with inline validation and shake, a spinner while submitting and a success state that morphs the button into a check.

↗

Set up SAML sign-in

Connect Okta, Entra ID or Google Workspace in about ten minutes.

Enterprise6 min readUpdated Oct 28

Breadcrumbs

A breadcrumb trail that truncates long labels and folds the middle of deep paths into an ellipsis menu.

↗
Portland rentals7-9 of 36
  • Bright 1-bed, Mississippi Ave$1,640
  • Craftsman duplex, Irvington$2,720
  • Top-floor loft, Nob Hill$2,240

Pagination

Page navigation with ellipsis collapsing, an indicator that slides between pages and a compact variant with a page select.

↗
Projects3 active
  • Orbit Dashboard14 deployments
  • Fernhill Storefront9 deployments
  • Pocket Ledger3 deployments

Dialog Modal

An accessible modal with a blurred scrim, scale-and-fade transitions, a focus trap and focus returned to the trigger.

↗
PDFq3-roadmap-final.pdf

Dropdown Menu

A button-triggered menu driven by a data array, with icons, shortcuts, checkbox items, a side submenu and the full keyboard model.

↗

Attach receipts to this expense

Drop files here or browse

PDF, PNG, JPG, up to 5.0 MB

  • IMG_4021.jpg3.2 MB
    64%

Dropzone

A file upload area with an animated dashed drag-over border, type and size checks, inline errors and a file list with simulated progress. It never uploads anything.

↗

No saved homes yet

Saved listings will show up here.

Empty State

A zero-data state with four floating inline illustrations, a title, a description and primary and secondary actions.

↗

Skeleton

Shimmering loading placeholders: a rect, circle and text primitive. SkeletonCard, SkeletonList and SkeletonProfile ship in the same file.

↗

Why we rewrote the editor

Three years of patches had left typing laggy on long pages, so we started over.

A flatter document model

Blocks are now plain records in a tree, which makes undo and merging predictable.

Syncing without conflicts

Edits travel as small operations and replay in the same order on every device.

What the numbers say

Large documents open about four times faster, and memory use dropped by a third.

Where we go from here

Comments, version history and offline mode are next on the list.

Table of Contents Scrollspy

A sticky table of contents whose active item follows the page as you scroll, marked by an indicator that slides between entries. Clicking an entry scrolls to its section.

↗
FernhillPlantsPotsCare

Promo Modal

A promotional popup with a gradient artwork side, a delayed entrance and a don't-show-again checkbox. It closes with Escape or a click on the backdrop, and renders inside its own relative frame.

↗
OrbitSearch
OverviewReportsAlertsProjectsTeam
12.4k
3.8%
Share

Hotspot Tour

A product tour made of pulsing hotspots laid over a mock interface, with a step popover that offers Next, Back and Skip and works with the arrow keys.

↗
NewTempo 2.0 is here
TempoProductPricingDocs

Plan the week in a minute.

One calm place for tasks, notes and focus time.

Start freeWatch demo

Announcement Ticker

A thin announcement bar that rotates several messages vertically, with a progress hairline, a counter, pause on hover and focus, and a dismiss button.

↗

Charts · 18View all

Requests per minutelast 24h
2,481

Sparkline

A tiny smooth line with an optional area fill and a glowing end dot that draws in on mount.

↗

Stat Card

KPI card with a counting value, a green or red delta pill, a caption and an embedded sparkline.

↗
Weekly signups+18% WoW
050100150200MonTueWedThuFriSatSun
  • Mon: 84
  • Tue: 126
  • Wed: 112
  • Thu: 158
  • Fri: 141
  • Sat: 62
  • Sun: 48

Bar Chart

Vertical bars with rounded tops, grid lines, optional stacked series, grow-in motion and a hover tooltip.

↗
MRR$42.1k
020K40K60K80KJanMarMayJulSep
  • Jan: 18,200
  • Feb: 21,400
  • Mar: 20,800
  • Apr: 26,100
  • May: 29,900
  • Jun: 28,700
  • Jul: 34,200
  • Aug: 38,800
  • Sep: 42,100

Area Chart

Smooth monotone line over a gradient area with a hover crosshair, dot and tooltip, and a draw-in animation.

↗
Traffic sources30 days
  • Direct43%
  • Organic32%
  • Referral16%
  • Social9%

Donut Chart

Gapped arc segments that sweep in, a centered total, a percentage legend and hover that expands a segment.

↗
Skills reviewQ3 2026
DesignCodeSpeedDocsReviewComms

Radar Chart

A multi-axis radar chart with up to three translucent series, grid rings, point tooltips and a legend that hides or shows each series.

↗
385commitslast 22 weeks
JunJulAugSepOctMonWedFri

Heatmap Calendar

A GitHub-style activity grid with month and weekday labels, an intensity legend and a hover tooltip with date and count. Ships a deterministic sampleActivity helper.

↗
Checkout funnel3.6% CVR
Visits86,400100%Product views41,20048%-52%Add to cart12,90015%-69%Checkout6,4807.5%-50%Purchased3,1203.6%-52%

Funnel Chart

A conversion funnel of centered trapezoid stages with absolute values, share of the first stage and the drop-off between stages.

↗
CPU loadnode-04 / eu-west
0%Busy0100

Gauge Meter

A semicircular gauge with colored zones, tick marks, an animated needle and a large readout that counts to the value.

↗
API latency
0ms200ms400ms600msOct 3Oct 11Oct 19Oct 27

Multi-line Chart

Smooth lines on shared axes with an interactive legend, a crosshair that snaps to the nearest point and a tooltip listing every series.

↗
TodaySat, Oct 31
81%
  • Move81%486 / 600 kcal
  • Exercise80%24 / 30 min
  • Stand75%9 / 12 h

Progress Rings

Concentric activity rings with rounded gradient strokes, an animated sweep, a center slot and a legend with value and goal.

↗
Top countries48.2k visitors
  1. 1United States6.2%18.4K45.4%
  2. 2Germany3.4%9,81024.2%
  3. 3United Kingdom11.8%7,24017.8%
  4. 4Brazil24.5%5,12012.6%

Ranked Bars

Horizontal ranking bars with rank, label, value and share of total, plus optional delta badges and an animated show more toggle.

↗
ETH / USD
$3,850.47+13.92%
3,200.003,400.003,600.003,800.004,000.00Mon 00Tue 06Wed 12Thu 18Sat 00Sun 06

Candlestick Chart

OHLC candlesticks with wicks, a price axis, a volume strip, a crosshair with a price tag and an OHLC tooltip. Ships a deterministic sampleCandles helper.

↗
Monthly revenue$37.8k
+10.5%
$15k$20k$25k$30k$35k$40kJanMarMayJulSepNov

Chart Line Graph

A responsive line graph that draws its path when it scrolls into view, with gradient area fill, gridlines, a pulsing end point and a crosshair tooltip you can drive with the pointer or the arrow keys.

↗
Sessions by channelLast 14 weeks
Sessions by channelStacked stream of 6 series over 14 periods, from Aug 4 to Nov 3. Latest total 202k.

StreamgraphNew

Stacked series flow around a centre line as smooth organic streams that grow out of the axis on mount. A crosshair reads every period, hovering a stream isolates it, and legend chips hide series while the remaining streams reflow.

↗
Trial journeys10,300 signups
Trial journeys, Q3Flow diagram across 3 stages. 10,300 entries from Search, Referral, Partners, Direct. Paid annual 1,760, Paid monthly 1,740, Evaluating 2,010, Churned 4,790.
Search4,820
Referral2,140
Partners1,360
Direct1,980
Self-serve trial7,620 · 74%
Sales demo2,680 · 26%
Paid annual1,760 · 17%
Paid monthly1,740 · 17%
Evaluating2,010 · 20%
Churned4,790 · 47%

Sankey FlowNew

A multi-stage flow diagram laid out from plain nodes and links: gradient ribbons draw left to right stage by stage. Hovering or focusing a node lights its whole upstream and downstream path, and each ribbon shows its share in a tooltip.

↗
Cloud spend by service, OctoberTreemap of $89k across 5 groups: Compute $42k, Data $20k, Storage $11k, Network $9.0k, Observability $6.5k.
Showing All services

Zoomable TreemapNew

A squarified treemap of groups and leaves, colored on a diverging scale by month-over-month change. Clicking a group zooms it to fill the frame as the other tiles fly out, with a breadcrumb and Escape to zoom back.

↗
Q4 scorecardDay 58 of 92
  • Revenue
    Revenue $1.84M of $2.20M target
    $1.84Mof $2.20M+$220k
    At risk
  • New customers
    New customers 412 of 500 target
    412of 500+44
    At risk
  • First response
    First response 3.2h of 2.0h target
    3.2hof 2.0h-0.9h
    Behind

Bullet Chart ScorecardNew

A stack of bullet charts for quarterly goals: qualitative bands, the actual bar, a target tick and last quarter's marker, with status pills that update. An Actual and Projected switch reveals hatched end-of-quarter forecasts, and lower-is-better metrics invert the scale.

↗

Lists & tables · 16View all

Recent orders
Ava ThompsonPaid$249.00
Noah GarciaPending$89.50
Mia ChenPaid$1,240.00

Data Table

Sortable table with sticky header, zebra rows, status pills, an empty state and optional pagination.

↗
3 people
  • Maya Johnson, OnlineOwner
  • Daniel Okafor, AwayAdmin
  • Priya Raman, OnlineMember

People List

A team directory with initials avatars, presence dots, role badges, a keyboard-friendly row menu and a search field with an animated empty state.

↗
Documents3 items
1 selected
1 selected
  • Brand assets24 itemsOct 30
  • Q3 report.pdf2.4 MBOct 28
  • Forecast.xlsx612 KBOct 26

File List

Files and folders with a list and grid view, type-colored icons, multi-select checkboxes and a selection toolbar that slides in.

↗
Weekly XPresets in 2d
  1. Rank 1Sofia Marchetti12,840xp–
  2. Rank 5You9,215xp4

Leaderboard

A ranked list with medals for the top three, proportional score bars that grow in, rank change arrows and a pinned row for the current user.

↗

Today+$3,221.51

  • ReferenceTXN-84F2-19C7AccountVisa 4821
  • ReferencePO-5521-A0E3AccountChecking 0917
  • ReferenceTXN-71B0-44D8AccountVisa 4821

Yesterday−$84.37

  • ReferenceTXN-62A9-0B15AccountVisa 4821

Transaction List

Transactions grouped under sticky day headings, with merchant tiles, status chips, tabular amounts and an expandable detail row with a copy button.

↗
Inbox2 unread
  • Priya Raman, unread9:41 AM
    Roadmap review moved — The Q4 review now starts at 2pm so Daniel can join.
  • Stripe, unread8:15 AM
    Your payout is on the way — Funds should arrive within two business days.

Inbox List

Email-style rows with unread dots, star toggles, checkboxes, hover quick actions that replace the time and j/k keyboard navigation.

↗
2 results
  • Arc Floor LampLighting$1894.8
  • Tidal ChairSeating$4204.9

Product Grid

A shop listing with an animated category chip row, sort select, result count and a container-responsive grid that reflows with a FLIP animation.

↗
Today’s focusDrag to reorder
Focus an item and press Space to pick it up. Use the arrow keys to move it, Space to drop, Escape to cancel.
  • Design reviewHigh
  • Ship onboarding flowMedium
  • Write release notesLow

Sortable List

A drag-to-reorder list with pointer dragging, siblings that slide out of the way, and full keyboard reordering with live announcements.

↗
  1. Order placed3 days ago
  2. Packed in RenoYesterday
  3. Marcus is 6 stops away, due by 4:30 PM.
  4. DeliveredExpected today

List Timeline Vertical

A vertical timeline of events with icon nodes, a connecting line that draws in, relative timestamps and expandable details.

↗

Notifications

2

Today

Yesterday

List Notifications Grouped

Notifications grouped by day with unread dots, a mark all as read button and hover actions to toggle read or dismiss a row.

↗
  • Northwind redesign12 tasks
  • Q4 planningDue Fri
  • Customer interviews5 notes
  • Pricing experimentDraft
  • Brand refreshOn hold

List Pinned Reorder

A list where items pin to the top and move up or down with buttons or Alt and arrow keys, animated with a FLIP transition.

↗
Due
Nov 12, 2026
Paid with
Visa 4821
Due
Oct 29, 2026
Status
Paid
Due
Oct 17, 2026
Status
Paid

List Expandable Rows

Rows that open in place to reveal details with a smooth height transition, one at a time or several at once.

↗
Meridian Civicmeridiancivic.orgEnterprise920$538k71

Weekly active seats, 12 weeks+7%

Owner
Jonah Reyes
Renewal
Aug 1, 2027
Seat price
$49/mo
Plan
Enterprise
Larkspur Healthlarkspur.healthEnterprise640$412k92

Weekly active seats, 12 weeks+29%

Owner
Maya Chen
Renewal
Mar 14, 2027
Seat price
$54/mo
Plan
Enterprise
Tidewater Freighttidewater.coScale210$126k48

Weekly active seats, 12 weeks-33%

Owner
Jonah Reyes
Renewal
Dec 2, 2026
Seat price
$50/mo
Plan
Scale
Champion left in September.

Sortable Accounts TableNew

An accounts table whose rows glide to their new places when a column is sorted. Each row opens in place to a detail panel with a usage sparkline, owner, renewal and risk notes.

↗
Today
Today

Windowed Activity FeedNew

A long activity feed that only renders the rows in view, with a pinned date header pushed away by the next day. A date scrubber on the edge jumps through weeks and shows the current day in a bubble while scrolling.

↗
  • Rate limit the export APIAPI3MC
  • Billing empty statesDesign2LM
  • SSO setup guideDocs1PR
  • Retry webhooks with backoffAPI3KW

Grouped Task List with HandlesNew

A kanban flattened into collapsible status groups: drag a task by its grip within or across groups while the others make room, with work-in-progress limits that turn red when exceeded. Keyboard users lift with Space, move with the arrows and drop or cancel, with every move announced.

↗

  1. Maya Chen deployed api v2.41 to production

    Deploy · 4:12 PM
    Canary 10% for 20 min, then full rollout. No error budget burn.

  2. Jonah Reyes resolved INC-311 checkout latency

    Incident · 11:48 AM
    Root cause: cold cache after the Redis failover. Added a warmup job.

  3. Priya Raman approved #1856 Audit log export

    Review · 10:05 AM

  4. Leo Marsh pushed 6 commits to feat/billing-empty-states

    Commit · 6:31 PM

  5. Priya Raman published SSO setup guide

    Doc · 2:20 PM
    Covers SAML metadata upload, SCIM tokens and test sign-in.

  6. Jonah Reyes opened INC-311 checkout latency

    Incident · 9:02 AM

  7. Maya Chen requested changes on #1851 Dark mode tokens

    Review · 5:44 PM
    Contrast of muted text drops below 4.5:1 on the card surface.

  8. Kenji Watanabe merged #1849 Retry webhooks with backoff

    Commit · 1:15 PM

  9. Kenji Watanabe deployed worker v1.19 to staging

    Deploy · 3:50 PM

  10. Maya Chen pushed 3 commits to fix/export-rate-limit

    Commit · 11:27 AM

  11. Leo Marsh updated Billing FAQ

    Doc · 4:03 PM

  12. Kenji Watanabe approved #1842 Faster search index

    Review · 10:40 AM

  13. Priya Raman merged #1842 Faster search index

    Commit · 12:02 PM

  14. Maya Chen rolled back web v4.17

    Deploy · 7:18 PM
    Hydration error on Safari 17. Fixed in v4.18 the next morning.

Filterable Activity TimelineNew

A team timeline with a stacked weekly histogram on top: click a day bar to narrow to that day, toggle event types with counted chips and filter by people. Counts and bars recompute as filters combine, and entries cascade back in.

↗

Dashboards · 14View all

Analytics Dashboard

A full website analytics screen: KPI cards with sparklines, an area chart with a 7D, 30D and 90D toggle, top pages, a traffic sources donut and a live online counter.

↗

Sales Dashboard

A revenue overview with revenue and order KPIs, a goal progress ring, a revenue versus target combo chart, regional sales, a conversion funnel and a sortable top products table.

↗

Project Dashboard

A sprint overview with a progress header, task status tiles, a burndown chart, team workload bars, a mini kanban summary and checkable upcoming deadlines.

↗

Finance Dashboard

A banking overview with a total balance card, a gradient debit card, income versus expenses bars, a spending donut, recent transactions and savings goals you can top up.

↗

Admin Dashboard

A users admin page with search, role and status filters, a sortable table, row selection with a bulk action bar, pagination and a slide-in detail panel.

↗

Orders Dashboard

An e-commerce orders screen with stat tiles, status tabs that filter an orders table, payment and fulfillment chips and a timeline panel for the selected order.

↗

Crypto Portfolio Dashboard

A portfolio screen with a scrolling price ticker, total balance with a sparkline, an allocation donut, a candlestick chart with volume and range tabs, recent activity and a sortable holdings table. Selecting an asset charts it.

↗

HR People Dashboard

A light people operations screen on warm paper: headcount by team as stacked columns, a hiring pipeline funnel, a November time-off heatmap with day details, upcoming reviews and a team directory, all filtered by team.

↗

Customer Support Dashboard

A help desk overview with segmented KPI meters, ticket volume by hour against last week and a forecast, an SLA gauge with a target marker, a queue with priority pills, assignees and SLA countdowns, a CSAT trend and a live activity feed.

↗

Marketing Campaigns Dashboard

A campaign report with a KPI band, a sortable channel table with inline spend and ROAS bars, a flowing conversion funnel, budget burn rings with pacing, top regions and gradient creative thumbnails ranked by CTR.

↗

Compact Analytics OverviewNew

A one-screen site analytics overview: KPI tabs switch the main chart between visitors, pageviews, bounce rate and visit duration against the previous period, with a live visitor counter. Side panels list top pages, sources and countries with inline bars.

↗

Ops Monitoring WallNew

A dark operations wall with live service tiles whose heartbeat strips scroll as new checks arrive, an incident banner with a running timer, a region map with traffic bars, 45-day uptime strips and an event log.

↗

Sales Pipeline BoardNew

A deal board where dragging cards between stages recalculates stage totals, weighted values and a quota meter that stacks closed revenue with the weighted forecast. Owner avatars filter the board and stale deals are flagged.

↗

Personal Finance SummaryNew

A calm personal money overview on warm paper, with a month switcher that moves every number: net worth with its trend marker, a spending donut, budget envelopes that hatch when overspent, a bills calendar and savings goal rings. Also ships a dark appearance.

↗

App UI · 16View all

Open sprint boardG B
Open roadmapG R
Go to inboxG I

Command Palette

A Cmd+K modal with fuzzy search, grouped results, arrow-key navigation and a focus trap.

↗
  1. Maya Chen moved ORB-1422m ago
  2. Sam Okafor commented on ORB-13818m ago
    Can we ship the invite flow before Friday?

Activity Feed

A vertical timeline of events with avatars, detail cards and a staggered entrance.

↗
Notifications

Notification Bell

A bell button with a popping badge, a ring on new items and an unread dropdown.

↗
12 open issues, 3 blocked on design review.

Tabs Underline

Tabs with a measured sliding underline, icons, counts and crossfading panels.

↗
Drag with the pointer, or hold Alt and press the arrow keys to move this card.
To do2
  • Auth
  • Search
Doing2
  • Billing
  • Invites

Kanban Board

Columns of cards you can drag between lists and reorder, with a placeholder slot and add buttons.

↗

Profile

This is how other people in the workspace see you.

Photo
PNG or JPG, at least 256 px.
Personal details
Your name appears on comments and invoices.
You have unsaved changes

App Settings Page

An account settings screen with vertical tabs for profile, notifications, security and billing. A save bar slides up as soon as anything changes.

↗

Notifications

Lena Park mentioned you in Q4 pricing experiment
9:42 AM· Growth
Diego Ramos assigned you Fix chart tooltip clipping on Safari
8:15 AM· Web app
Release bot deployed web-app v2.14.0 to production
7:58 AM· Web app
Amara Chen commented on Onboarding flow v3
6:20 PM· Design
Tom Whitaker mentioned you in Weekly metrics review
2:04 PM· Growth
Sofia Lind invited you to Brand refresh workspace
Mon· Brand
Kenji Mori commented on API rate limits doc
Mon· Platform

App Notifications Center

A full notifications inbox with All, Mentions and Unread filters, day groups, mark as read, a snooze menu with undo, an empty state and a detail pane.

↗

November 2026

+2 more

App Calendar Month

A month calendar with colored event chips, a highlighted today, an event popover, sliding month changes and an agenda panel for the selected day.

↗
10 items
Campaign assets48 items · Nov 3
Press kit12 items · Oct 29
hero-launch-v4.png4.8 MB · Nov 4
Launch brief.docx312 KB · Nov 2
Budget Q4.xlsx128 KB · Nov 1
teaser-cut-03.mp4286.0 MB · Oct 31
Brand guidelines.pdf18.2 MB · Oct 27
product-shots.zip642.0 MB · Oct 24
billboard-night.jpg9.1 MB · Oct 22
voiceover-final.wav54.0 MB · Oct 20

App File Manager

A file browser with breadcrumbs, grid and list views, checkbox selection with a bulk action bar, a storage meter and a drag-over upload overlay.

↗
launch-week
Shipping v2.15 on Nov 12
Yesterday
Diego Ramos5:48 PM
Staging is green again. The Safari tooltip bug was a stacking context on the sidebar.
Fix is in PR 2381 if anyone wants to look before tomorrow.
You6:02 PM
Reviewed and approved. Nice catch.
Today
Amara Chen9:12 AM
Final hero is up. I went with the darker gradient, it reads better on the pricing page too.
pnghero-launch-v4.pngShared file
Lena Park9:20 AM
Love it. Can we get a square crop for the social posts?
You9:24 AM
I will pair with Amara after standup. Lena, do you still need the changelog draft today?
Lena is typing
changelog-draft.md
Enter to send, Shift + Enter for a new line

App Chat Inbox

A team chat screen with channels and direct messages, grouped bubbles with day dividers, a composer with attachment chips and a live typing indicator.

↗

Edit profile · folio.page/maya

Up to date
Profile photoSquare image, 400 px or larger.
About
Links
Skills · 5/8
Product designDesign systemsData vizFigmaPrototyping
Open to work
Shows a badge on your public card.
Card color

App Profile Editor

A portfolio profile editor with a live preview card beside the form, a photo upload, link rows you can add and remove, skill chips and a card color picker.

↗
3/6done
Getting started

Welcome to Northwind, Maya

3 steps left · about 7 minutes

  1. Pick a name and a URL your team will recognize. You can change both later in Settings.

  2. Projects move faster together. Invite by email or share a link that expires in 7 days.

  3. Sync events from Postgres, Stripe or Segment. The first import usually finishes in under five minutes.

  4. Start from the Revenue template or a blank canvas. Drag metrics in, then pin the ones you check every morning.

  5. Get a message in Slack or email when a metric crosses a threshold, like churn above 3% in a week.

  6. Check numbers on the go. Scan the code in Settings or search for Northwind in your app store.

App Onboarding Checklist

A light getting-started screen with a progress ring, expandable checklist steps, a confetti burst when everything is done, plus Skip for now and dismiss.

↗

November 2026

Nov 9 – 15 · 16 events · 18.5 h booked

Mon 9
Tue 10
Wed 11
Thu 12
Fri 13
Sat 14
Sun 15
8 AM9 AM10 AM11 AM12 PM1 PM2 PM3 PM4 PM5 PM10:52

App Calendar WeekNew

A week view on a time grid where events can be dragged to another day or hour and stretched from their bottom edge, snapping to 15 minutes with a live time tooltip. Overlapping events share the column, a red line marks the current time and a click on an empty slot creates an event.

↗

App File ExplorerNew

A column file browser where each folder opens in a new column to the right, with breadcrumbs, full arrow key navigation and a preview pane. The preview renders highlighted source, image art, a playable waveform, a spreadsheet grid or a document page depending on the file.

↗

Notifications 5

App Notification GroupsNew

A notification center that folds each source into a stack with the newest card on top and the rest peeking underneath. A click fans the stack open with a spring, cards carry inline actions that resolve in place, and groups offer one bulk action.

↗

Appearance

Changes preview instantly for everyone in Lumen Ops.

Theme
Accent Violet
Density
Text size and sidebar
Up to date
Live preview

App Appearance SettingsNew

An appearance panel for theme, accent, corner radius, density, text size and sidebar side, beside a miniature app that restyles itself live as each control moves. A status dot tracks unsaved changes and Reset returns to the last save.

↗

Agent kit · 18View all

RARelay Assistant
The release is healthy and error rates are flat. Roll back with relay deploy --undo if that changes.

Streaming Text

Reveals an assistant reply word by word with a blinking cursor. Supports bold, inline code and line breaks. The server render shows the full text.

↗

Ada Lovelace: Did the staging deploy go through?

Relay Assistant: Yes. Build 482 is live on staging, all 3 checks passed.

Chat Thread

A scrolling conversation with user and assistant bubbles, avatars, timestamps, a streaming last reply, a typing indicator and auto-scroll to the newest message.

↗

Args
{ "query": "rollback policy" }
Result
{ "hits": 3, "top": "rollback.md" }

Tool Call Card

A collapsible card for a tool invocation with status, duration, syntax-colored arguments and result, and a copy button.

↗
RARelay Assistant
Thinking
Reading logs

Thinking Indicator

A compact thinking state that cycles through phrases with a fade, as a shimmering label or breathing dots, with an optional elapsed timer.

↗

Prompt Bar

A chat composer with an auto-growing textarea, attach and mic buttons, a model picker and a send button. Enter sends, Shift+Enter adds a line.

↗

  1. Read deploy config (Done)

    relay.toml, 3 services

  2. Run staging checks (In progress)

    Health probes 2 of 3

  3. Promote to production (Pending)

Agent Steps

A vertical plan or trace with pending, active, done and failed steps joined by a connector line that fills as steps complete.

↗
Run 4821, refund request4.8s total
  1. support_agent.run
  5. write_reply

Agent Trace Timeline

A vertical trace of an agent run. Each span shows a status icon, a nested name and a bar sized to its start and duration, and spans with a payload expand in place.

↗

Refund order #4821

payments.refund

Partial refund to the card on file.

Proposed changesauto-reject 24s
amount$0.00$48.00
reasondamaged_on_arrival

Agent Approval Card

A human-in-the-loop card for a proposed agent action, with a before and after summary, an Approve step that asks for confirmation, inline editing and a countdown that rejects on its own.

↗

What I remember

3 facts

  • Prefers short answers with code first.

    chat, Mar 394%

  • Deploys to Vercel from the main branch.

    repo scan81%

  • Works in the Lisbon time zone.

    inferred52%

Agent Memory Panel

A list of facts the agent remembers, each with a source chip and a confidence meter. Facts can be edited in place or forgotten with an animated removal.

↗
  • Aster ProreasoningvisionSpeedCost
  • Aster FlashfasttoolsSpeedCost
  • Lumen CodecodetoolsSpeedCost
  • Vela MinicheapfastSpeedCost
  • Quill Longlong contextSpeedCost

Agent Model Picker

A model selector with capability tags and speed and cost meters. It follows the listbox pattern with arrow keys, Home, End, typeahead and Escape.

↗
src/session.ts+2-1
@@ -18,7 +18,8 @@ export async function loadSession(req)
const token = readToken(req);
const store = await openStore();
Removed: const user = store.get(token);
Added: const user = token ? store.get(token) : null;
Added: if (!user) return redirect("/login");
const prefs = await loadPrefs(user.id);

Agent File Diff

A compact unified diff viewer with line numbers, hunk headers, added and removed lines, collapsible unchanged context and a button that copies the patch.

↗
  • /summarizeCondense the thread or a file
  • /searchLook something up in the workspace
  • brief.pdf232 KB
  • mockup.png1.4 MB
Type / for commands

Agent Composer with Attachments

A message composer with animated attachment chips, a slash-command menu that opens on "/" and a send button with idle, ready, sending and sent states.

↗
Atlas workspace / Board prep
  • Q3-board-deck.pdf2.4 MB
  • churn-cohorts.csv184 KB

Prompt Box Modes

A composer with file attachments, Search, Think and Create mode chips that retint the box, and a send button that morphs into a Stop pill while a response is running. Enter sends, Escape stops.

↗
Review notes are in. Want me to send a summary to the team?
Enter to send, mic to dictate

Prompt Voice Recorder

A composer that turns into a live waveform with a timer while you dictate, then collapses into a transcribing state and types the transcript into the box. It can read a real microphone level or simulate speech.

↗
/summarize
/ commands @ context Tab complete
  • md@release-notes.mdDocumentEnter

Prompt Slash Commands

A composer where / opens commands and @ opens context sources, with an inline ghost completion that Tab accepts. Picks become removable tokens in front of the text, and Backspace at the start removes the last one.

↗

Run 2291 · Ship the pricing page

00:00 / 01:30
Plannerorchestrator
Researcherweb + docs
Coderrepo write
Reviewertests + lint
Break down brief
Merge findings
Scan 6 pricing pages
Scaffold route
Build tier table
Fix rounding
Run 48 tests
Re-run + lint
Planner started break down brief

Agent Run LanesNew

A replay of a multi-agent run with one swim lane per agent, task bars that fill as a playhead sweeps the time axis and curved handoff links that draw in when work passes between agents. Drag the track or use the arrow keys to scrub, and a status line narrates the latest event.

↗

Coder wants to run fs.write_file

Fix proration for months that are not 30 days long.

medium risk
@@ -12,6 +12,7 @@ export function prorate(
const days = daysBetween(start, end);
− const ratio = days / 30;
+ const ratio = days / daysInMonth(start);
+ if (ratio <= 0) return 0;
2/2 changes · +5 −1

Agent Tool PermissionNew

A permission prompt for a file-writing tool call that previews the change as a diff per file, lets you include or drop each hunk and choose how long the permission lasts. Approve applies only the chosen hunks, and the card turns into a receipt with Undo.

↗

Memory

123 / 130 tokens in context

Forgotten when the chat ends

  • 15 tokUsed in last reply
  • 12 tokOver budget, not sent

Agent Memory ScopesNew

Agent memory split into You, Project and This chat, with a token budget bar that packs pinned facts first and marks the ones that no longer fit. Facts edit in place, pause with a switch, glow when they were used in the last reply and can be added to the open scope.

↗

Social & feedback · 15View all

Boston fern in clay

Fernhill / Indoor plants

$341,284 likes

Like Burst

A heart button that fills with a bouncy pop, scatters a ring of particles and rolls its count to the new value.

↗
Maya J.Verified
Mar 12
Thriving on the windowsill

The fern arrived early, packed so carefully that not a single frond was bent. It has already put out two new shoots and the pot is even prettier than the photos.

Review Card

A customer review with avatar, half-star rating, a Read more clamp, a verified badge and a helpful vote.

↗

Fernhill Plant Club

Grown by neighbours

  • AO
  • BH
  • CT
  • DS
  • EB
  • +14
18 members

Avatar Stack

Overlapping avatars with a +N tail. Hovering spreads them apart and shows a name tooltip.

↗

From the Fernhill journal

Repotting without tears

Share this post

Share Row

A row of share pills with monochrome glyphs that pick up each platform's accent on hover, a copy-link pill and a native share button.

↗

Loved at Fernhill

4.62,310 reviews
  • 5 stars: 74%, 1,700 reviews
  • 4 stars: 18%, 420 reviews
  • 3 stars: 4%, 100 reviews
  • 2 stars: 2%, 50 reviews
  • 1 stars: 2%, 40 reviews

Rating Summary

The average rating as a big number with stars and review total, beside five bars that fill in on mount.

↗

Burnt honey tart

Pastry / 45 min

1,284 likes

Like Heart Fill

A heart button that fills with a rolling liquid wave, pulses two rings and rolls its count to the new value.

↗
PR

Priya Raman

Staff engineer / 2h ago

Moving retries into the queue worker cut our p99 from 4.1s to 380ms. Worth it.

48 likesReplyShare

Like Thumbs Pop

A thumbs-up that tilts back, pops forward and throws a fan of spark lines, with a rolling like count beside it.

↗
NH

Noor Haddad

Product designer / 5h

Shipped the new onboarding today. Three screens became one and nobody noticed.

CommentRepost

Like Reaction Picker

A react button that opens a row of five face reactions on click or press and hold. The hovered face scales up and the choice replaces the button label.

↗

Night Drive

Kestrel Arcade / 3:42

Like Star Favorite

A star toggle that spins, sprays a burst of tiny stars and shows an Added to favorites chip that fades on its own.

↗

Essay / 8 min read

In praise of slow software

Why great tools feel unhurried.

By Lena Okoro1,204 saved

Like Bookmark

A bookmark ribbon that drops into a tray with a bounce and a squash, next to a rolling saved counter.

↗
MA

Maya Alvarez

@mayamakes / 12.4k followers

Follow Button

A pill that morphs its width between Follow, Following and Unfollow on hover, with a check that draws itself.

↗
Score 128

Idea / tomas.v / 3d ago

Bulk-edit labels from the table view

Select a few rows, rename or merge their labels in one pass.

TablesLabels

Vote Arrows

An up and down vote pair with a rolling score, one active vote at a time and optimistic updates that roll back when onVote rejects.

↗

Field notes / Oct 28

Why we moved the roadmap into the repo

Planning docs drifted out of date in a week. Pull requests did not.

Share Popover

A share button that opens an anchored popover with a link field, a copy button that confirms and four generic channels. Escape and outside click close it.

↗

Repotting a rootbound fern

Journal / 6 min

Share Sheet

A bottom sheet with a scrim, a drag handle, a channel grid and a copy link row. It lives in its own frame, closes on drag down, scrim click or Escape.

↗

changelog / v2.4.0

Faster builds, calmer logs

  • + incremental cache
  • + quiet mode for CI
  • - removed legacy flags
Email

Share Floating Rail

A round share trigger that fans a vertical rail of icon buttons out with a staggered spring. Each button shows a tooltip on hover or focus.

↗

Modals & popups · 24View all

Zoom Origin Dialog

A centered dialog that grows out of the exact button that opened it and shrinks back into it on close. Ships as a deploy confirmation with branch, checks and a publish button that fills while it works.

↗

Snap Bottom Sheet

A draggable bottom sheet with peek and full snap points, velocity-aware flicks and drag down to dismiss. The default content is a ride picker with a radio list and a sticky confirm button.

↗

Stacked Side Sheet

A side sheet for order details that opens a second sheet on top for refunds while the first one recedes behind it. Escape and Back peel the layers off one at a time.

↗

Fullscreen Reveal Menu

A fullscreen navigation overlay that opens as a circle growing from the menu button, with oversized links rising in sequence. Hovering one link dims the rest and slides in an arrow.

↗

Your session is about to expire

We will sign you out of Ledgerline in 0:45 unless you stay.

Your draft “Q3 board memo” is saved.

Session Timeout Alert

An alert dialog with a draining countdown ring that turns red in the last ten seconds and signs the user out at zero. Clicking the backdrop nudges the dialog instead of dismissing it.

↗

Transfer Acme Robotics?

Jordan becomes the owner and takes over billing the moment you confirm.

Transfer Confirm Dialog

A high-stakes confirmation that shows ownership moving between two people and stays locked until the user ticks an acknowledgement. On success the crown hops from one avatar to the other.

↗

Create Project Dialog

A form dialog with a live URL preview that checks slug availability as you type, a sliding team switch and visibility cards. It shakes on invalid input, submits with Command Enter and resizes smoothly into a success state.

↗

Zoom Lightbox

A photo lightbox opened from a mosaic grid, with directional slides, a filmstrip and click to zoom that pans with the pointer. Arrow keys, swipe, Z for zoom and I for details all work.

↗

Chapter Video Modal

A video modal with a scrubber split into chapters, hover previews of each chapter, synced captions and speed control. Without a src it plays a styled preview timeline, so it works before the video exists.

↗

Nested Command Modal

A command modal where items open sub-pages, shown as breadcrumb chips inside the search field, and Backspace walks back out. Searching from the root also finds options nested one level down.

↗

Onboarding Stepper Modal

A three step onboarding modal: pick a role, name and color the workspace, then invite teammates as email chips. Steps slide in the direction you move and the dialog height follows the content.

↗

Success Check Modal

A payment success modal that draws its ring and check, throws a small spark burst and counts the amount up. The receipt-style card ends in a perforated edge with a staggered list of details.

↗

Rich Popover

A deployment chip that opens a detailed popover with status, commit, a proportional build timeline and quick actions. It flips above or below and nudges sideways to stay on screen while the arrow keeps pointing at the trigger.

↗
JK

Jonah Kim · #payments · 10:42

Refund retries are idempotent now. Huge thanks to

Mara Lindqvist@mara.linStaff engineer, PaymentsMaking refunds boring. Previously ledger infra at Klarna. Writes about idempotency.Stockholm16:42 local48Repos2,148Followers180Following

Hover Profile Card

An @mention that shows a profile card on hover, with an underline that fills while the open delay runs and a grace period so the pointer can travel into the card. Includes a contribution grid, a follow toggle with a live count and keyboard access on focus.

↗

Newsletter Envelope Popup

A newsletter popup where the letter slides into an envelope, the flap folds shut and a seal stamps down once the address is accepted. Topic toggles, inline validation with a shake and an async submit are built in.

↗

Cookie Preferences

A cookie consent card or bottom bar with a segmented dial that counts the enabled categories, a Customize panel that expands in place with switches and vendor lists, and a small launcher with a receipt id after saving.

↗

Exit Intent Popup

Opens when the pointer leaves through the top of the window and reminds the visitor of their bag. The coupon stub tears off when pulled down or tapped, revealing a code that can be copied and a discounted total.

↗

Promo Countdown Popup

A limited-time offer inside a rotating light border, with rolling digit reels for the countdown, a striped claimed-seats bar and a CTA with a sheen. It switches to an ended state when the timer reaches zero.

↗

Upgrade Limit Prompt

Shown when a usage limit is reached: a segmented meter that fills to the red, a queued overflow tag, a billing switch with a sliding thumb and plan cards whose prices roll and whose features check in one by one.

↗
Northwind
Home
Projects
Inbox
Reports
Settings
Search projects/
+ New
AKJMRS
Tasks closed this week
148+18%
Today
Review launch copy
Sync with design
QA checkout flow
Ship v2.4 notes

Tour Spotlight

Wraps any screen and walks through it step by step: a rounded spotlight glides between targets while everything else dims, and the step card follows with a pointer tail, progress pills and arrow key navigation.

↗

What's New Stories

A release announcement told as stories: segmented bars fill and advance on their own, pause on hover or keyboard focus, and each update brings an animated illustration that slides in from the direction you move.

↗
IMG_2041.heicRight-click or hold ⇧F10

Radial Context Menu

A context menu that opens as a ring of wedges around the pointer on right-click, long-press or Shift F10. Aim toward a wedge to select it, read the label in the hub, and confirm with a click or Enter.

↗
New message from Priya Raman: Pushed the new onboarding frames. Can you check the empty states before standup?
Priya Raman#design-reviewnow

Pushed the new onboarding frames. Can you check the empty states before standup?

Island Notification

A notification pill at the top of the screen that morphs into a card with a springy resize, then into an inline reply field. Messages queue with an unread count, collapse on a paused-on-hover timer and end in an All caught up state.

↗

Share Access Dialog

A document sharing dialog with email chips that validate as you type or paste, a permission picker, a people list with role changes and removal, and a general access switch whose lock turns into a globe.

↗

Forms & inputs · 24View all

Northwind Pro · Annual

$96.00

Your card is encrypted end to end.
Renews Nov 7, 2027Pay $96.00

Card Number Field

A single-line card field that detects the brand, checks the number with Luhn and then folds it down to the last four digits while expiry and security code slide in. The tiny card glyph flips to its back when the security code has focus.

↗

Turn on two-step sign in

A code arrives each time you sign in.

We'll text a code to confirm it.8/10

Phone Field with Country

A phone input with a searchable country picker and a per-country mask whose remaining digits show as faint ghost characters. Pasting a number that starts with a dial code switches the country on its own.

↗
In 7 days
November 2026

Date Picker

A date field that understands plain words like tomorrow, next fri, Dec 3 or +10d and previews the parsed date as you type, with a calendar that slides between months. The grid supports arrows, Page Up and Down, Home and End.

↗
4 nightsNov 13 – Nov 17
November 2026

Date Range Picker

A range picker where you drag across days or click a start and an end, with a live preview band that wraps across weeks and a preset column. A running total of days or nights sits above the Apply button.

↗

From SFO · Fri, Dec 12 · 1 adult

Searching…

Async Combobox

A searchable combobox that debounces input, shows shimmering skeleton rows while results load and drops stale responses. Matches are underlined, rows stagger in and the footer reports the result count and how long the search took.

↗

Replying to @mayachen

22 words · 1 min read · ⌘ ↵ to send11 characters left

Autosize Textarea

A textarea that grows smoothly with its content up to a row limit, with a ring counter that turns amber near the limit and red past it. Characters over the limit are tinted in place, and Cmd or Ctrl plus Enter sends.

↗

Drop files here or browse

PDF, ZIP or images up to 50 MB

  • Q3-board-deck.pdf4.2 MB · Uploaded
  • product-shots.zip7.1 MB of 18.6 MB · 38%

File Drop Upload

An upload zone in three variants, panel, strip and round avatar, with a marching dashed border on drag and a lifting icon. Each file gets a typed document glyph, a progress ring and a bottom progress line, and rejected files shake with the reason.

↗
4.56:1AA
#7c5cff

Color Picker

A color picker with a saturation and brightness pad, hue and opacity sliders, a HEX, RGB and HSL field and swatches. It shows the original next to the new color and grades contrast against your background with WCAG AA and AAA.

↗

Pickup at Ember & Olive

Drag to set the hour

06:30 PM

Clock Time Picker

A time picker with an analog dial: drag the hand to the hour and it moves on to minutes, which snap to a step. A large readout, an AM and PM switch and full keyboard control sit beside it.

↗
LM

Lena Moreau

lena@moreau.studio

Available $2,400.00
≈ €1,148.62

Currency Field

A money input where digits fill from the right like a register, each new digit rolling in, formatted live for the locale and currency. It shows a converted estimate, quick add chips and a balance limit that shakes when crossed.

↗
Assigneematching
  • mayais
  • meis
Prefix with - to exclude, like -status:closed

Search with Filters

A search field that turns key:value syntax into colored filter tokens, suggesting filter names and then their values as you type. Prefix with a minus to exclude, click a token to edit it, and press Backspace twice to remove the last one.

↗
Sign the lease, unit 4B

Signature Pad

A signature pad whose line thins with speed and thickens when you slow down, drawn as smooth curves at full screen resolution. It has ink colors, undo, a typed alternative and a signed stamp with the time.

↗

Talk to our team

Pick a topic and we will route you to the right person.

20 to go
Replies within 2 business hours

Contact Form

A routed contact form where the topic switch reshapes the fields and the reply time. Inline validation, a message progress ring and a paper plane success state with a ticket number.

↗
Lumen

Create your account

Free for 14 days. No credit card required.

8+ chars
Number
Uppercase
Symbol

Already have an account? Sign in

Signup Form

Account creation with a live username availability check, email typo suggestions and four password checks that fill as bars. Ends on an animated envelope with a resend countdown.

↗
Step 1 of 40% complete

Name your workspace

This is where your team plans, ships and reviews.

You can change this later in settings.

Wizard Form

A four step onboarding wizard with a segmented progress rail, direction aware slides and a review step with edit links. Creating the workspace plays a short setup checklist.

↗
Quick survey · 1 of 4
1

How likely are you to recommend Fieldnote to a colleague?

Not likelyExtremely likely
press 0 to 9

Survey Form

One question at a time with an NPS scale, lettered choices and keyboard shortcuts. Picks confirm with a quick blink and advance on their own, ending on a summary with the score group.

↗
Looks deliverable

Address Form

A shipping address form that adapts labels, postal masks and line order to the country. A parcel label above it prints the address as you type and stamps it once saved.

↗

Account settings

⌘ S to save
Shown on comments and mentions.
EmailManaged by your organization.
priya@lattice.devVerified
Used for reminders and digests.
DensitySpacing in lists and tables.

Email notifications

Mentions and repliesWhen someone tags you or replies.
Weekly digestA Monday summary of your projects.
Product updatesNew features, about once a month.
2 unsaved changes

Settings Form

Account settings that track every edit: changed fields get a dot and a floating bar counts unsaved changes with Reset and Save. Supports Cmd+S and confirms with a green saved state.

↗

Feedback Widget

A launcher pill that opens a feedback panel with a face whose mouth and brows morph across a five step mood scale. Category, note and page URL go out in one tap.

↗
Issue 118

The Interface, a Thursday letter on product craft.

Join 12,400 designers

Inline Subscribe

A one line newsletter field where the button sweeps across the input while it subscribes, then turns into a confirmation with a shortcut to the right inbox. Invalid emails shake and raise a tooltip.

↗
Lena OrtizIntro call · Google Meet
November 2026Pacific Time

Booking Form

Pick a day from a strip with availability marks, choose a free slot, then add your details. Confirms with a perforated ticket and an Add to calendar file.

↗
Join the beta · estimated spot#6,086of 6,240
General
What will you build? +1023 spots
5 people

Waitlist Form

A waitlist form with a live priority meter: every optional answer moves your estimated spot forward and up through access tiers. Joining reveals a referral link with copy feedback.

↗

Sign inUse your Northwind account

or

Compact Login

Email first sign in that slides to a password step with the account chip, a caps lock badge and attempt pips. Too many misses lock the form with a countdown.

↗
Jonah Park@jonahpark · Seoul, KR
Add a short bio to reach 100%
  • NameJonah Park
  • Username@jonahpark
  • BioAdd a short bio
  • LocationSeoul, KR
  • Websitejonah.design

Profile Edit

A profile you edit in place, one row at a time, with Enter to save and Escape to cancel. A completion ring and hint track what is missing, and the avatar opens a color picker.

↗

Payments · 12View all

Pay Card Preview

A payment card that shows live number, name and expiry, and flips in 3D to the back when the CVC field is focused.

↗

Pay Card Form

A card entry form with grouped number formatting, a Luhn check, brand detection, expiry validation and a live card preview. It never sends data anywhere.

↗

Enter your card on the next step.

Pay from your bank app after checkout.

Your balance is applied first.

Pay Method Picker

A radio list of payment methods with a highlight that slides to the selection and a detail panel that expands under it.

↗

Payment successful

$48.00

Reference NV-48210

Pay Success Check

A payment success state where a ring draws, a check strokes in, dots burst outward and the amount and reference fade up.

↗

Pay Failed Retry

A payment failure state with a shaking x mark, an error message, reason chips and Retry and Change method buttons.

↗

Fernhill Plants

Boston fern, clay pot, soil mix

$128.40

Ships Thursday, free returns for 30 days

Pay Slide To Pay

A slide to confirm control. The track fills as you drag, the handle turns into a check, and Enter or the arrow keys work too.

↗
  • Ceramic mugMatte sand2$36.00
  • Linen apronOlive, one size1$42.00
Subtotal
$78.00
Code SAVE10
-$7.80
Tax (8%)
$5.62
Total
$75.82

Pay Order Summary

Line items with quantity steppers, subtotal, discount, tax and total. Amounts roll when they change and the list folds on narrow containers.

↗
Add a tip100% goes to the team
Subtotal
$42.00
Tip
$6.30
Total
$48.30

Pay Tip Selector

Tip percentage chips with the amount under each one, a custom amount field, and a total that rolls to the new value.

↗

Checkout / Promotions

Subtotal$54.00
Discountnone
Total$54.00

Pay Coupon Field

A coupon input with Apply, loading, valid and invalid states. A valid code turns into a removable chip with the saving; an invalid one shakes.

↗

Studio

$12/ month
Save 20%

Billed $144 once a year

  • Unlimited projects
  • Priority support
  • Team seats
  • PDF export

Pay Subscription Toggle

A plan card with a monthly and yearly switch. A pill slides between the two, the price rolls to the new figure and a savings badge pops in.

↗
InvoiceINV-2041
Due

Billed to Orchard Studio · Due Nov 11

  • Brand identity sprint$2,400.00
  • Illustration setx6$1,080.00

Amount due$3,480.00

Pay Invoice Card

An invoice summary with a Paid, Due or Overdue status pill, line items, download and pay buttons, and a perforated bottom edge.

↗
Main wallet

$0.00

Balance $2,486.50
Top up

Recent activity

  • Corner BakeryToday, 8:14-$6.40
  • Salary, Halden LabsYesterday+$1,840.00

Pay Wallet Balance

A wallet card with a counting balance, quick top-up amounts, recent activity and an eye button that blurs the figures.

↗

HUD & carousels · 10View all

EXP 01401

Ion Drift

Charged particles bending around the cursor.

WEBGL
01 / 05
Ion Drift, 1 of 5

Carousel Ring 3D

Cards standing on a circular orbit in real CSS perspective. Drag or swipe with inertia and snap, use the arrow keys or the buttons, or let it autoplay.

↗
Vector Lab / RenderNode 07Live
Frames today48,210+12.4% vs avg
GPU 61%Queue 0314:02 UTC

HUD Frame

A panel with corner brackets, a monospace header with a status chip and an optional scanning line over its content.

↗
Vector LabBoot / Build 2.4.1
Loading000%
  • CoreWait
  • ShadersWait
  • AudioWait
  • InputWait

HUD Boot Screen

A boot sequence with a logo, a segmented progress bar and status rows that resolve one by one from WAIT to READY. Click to replay.

↗
The experiments shelf2026
ShelfSignal Garden

HUD Shelf Slider

A stepped horizontal slider with tick marks, a diamond thumb, a 03 / 09 counter and the name of the current step.

↗
Archive08 / 08 shown
  • Ion Driftgraphics10.28
  • Parallax Atlasmap10.21
  • Signal Gardenxr10.17
  • + 5 more

HUD Filter Chips

A row of bracket-cornered filter chips with single or multiple selection, an All option and arrow key navigation.

↗
Now viewingIon Drift
Ion DriftEXP 014
StackWebGL
StatusLive
← →Browse

HUD Status Bar

A bottom bar with a key label, meta values split by hairlines and keyboard hints. Values tick up when they change.

↗
Vector Lab / Shader014

Ion Drift

Particles bend around a magnetic field.

Stack
WebGL
Licence
MIT
Status
Live
Added
10.28

HUD Detail Panel

A framed detail card with a kicker, a large title, a short description, a meta grid and a row of bracket buttons.

↗
02 / 07
  • 01Orbit KitTool
  • 02Orbital TypeType

HUD Search Field

A search input with a slash shortcut that focuses it from anywhere, a clear button, bracket corners that open on focus and a results readout.

↗
Vector LabExperiments in orbit34 pieces / 6 orbits

HUD Orbit Backdrop

A decorative backdrop of dotted orbits seen in perspective over a faint grid, with small nodes travelling along the rings. Pure CSS.

↗
Settings / Output03
Interface sound
Ambient loop
Haptic feedback

HUD Toggle Switch

A compact labelled switch like SND ON with bracket corners, a status dot and a flash on every click.

↗

Maps & geo · 6View all

Evening run
0.00/ 8.00 km
0:00 elapsed · 5:12 /km
17:45
0%

Map Route Replay

A procedural isometric city on canvas where a run replays as a glowing runner with a fading trail and kilometre markers. A time-of-day slider moves the sun, its shadows and the sky tint.

↗
Alder District● Live model · 256 bldg

Map City Blocks

An extruded procedural city on canvas that slowly turns on its own, rotates with drag and inertia, and switches to a night view with lit windows and street lamps.

↗
5 places nearby

Map Pin Board

A flat stylized map with pulsing pins. Hovering or focusing a pin raises a floating card with its details; arrow keys move between pins.

↗
Brightwater Coffee5 stores

Map Store Locator

A location list beside a stylized map. Choosing a store pans and zooms the map to its pin, and clicking a pin selects the store. Stacks into a map with a swipeable card row below 520px.

↗
FootfallSaturday, 14:00

Map Heat Dots

A dot-density heat map over a coastal city silhouette with a slow shimmer. Hovering or moving with the arrow keys reads the value and district of a dot.

↗
Riverside loopSat, Nov 1 · 07:12
Distance10.42km
Time52:18
Avg pace5:01/km
Elevation+186m
KM 0.00 M0:00/KM

Map Route Stats

An activity card with a route outline, four stats and an elevation and pace profile. Hovering or scrubbing the profile moves a dot along the route in sync.

↗

Ordering kit · 13View all

Corner Kitchen reviewsRate us
4.6out of 5
1,284 reviews
  • 5 stars: 75%
  • 4 stars: 17%
  • 3 stars: 5%
  • 2 stars: 2%
  • 1 stars: 2%

Rating Review Card

A public reviews summary: a large average, five stars with fractional fill, the review count, a 5 to 1 distribution that animates in, a Rate us link and an optional top review.

↗

Corner Kitchen

418 Maple Avenue, Brooklyn, NY 11215
Open today · 11 am to 10 pm
Open in MapsOpen in Waze

Map Directions Card

A location card with a locally drawn street map, a dropping pin and an animated route, the address, an hours line, a distance chip, and Open in Maps and Open in Waze links built from the address or coordinates.

↗
Table 5 · scan to order

Menu QR code

Level M
Where will it be scanned?
Tracked link: cornerkitchen.example/menu?src=table-5

QR Generator

A real QR code encoder with a generator panel: pick where the code will be printed and it appends a source parameter to your link so scans can be attributed, with a live preview, Download SVG and Copy link. Also exports QrCode and encodeQr.

↗

Corner Kitchen

@cornerkitchen

Open now · until 10 pm

Smash burgers, crispy fries and thick shakes on Maple Avenue since 2016. Pickup, delivery and late-night bites.

Order now

Made with care in Brooklyn

Link in Bio Card

A phone-sized link page for a local business: cover, avatar, verified name, open status, bio, an Order now button, a list of icon links, native share with a copy fallback, a QR toggle and a Save contact button that downloads a vCard.

↗
OrdersCorner Kitchen · Tonight
New 1Preparing 2Ready 11 late
New1
  • #10482 min

    Maya

    Delivery

    2× Smash Double, Crinkle Fries

    $34.50
Preparing2
  • #1046Late23 min

    Priya

    Delivery

    Margherita, Large, Garlic Knots

    $27.00
  • #10459 min

    Leo

    Table 7

    3× Fish Tacos, Horchata

    $21.25
Ready1
  • #104314 min

    Sam

    Pickup

    Veggie Burrito, Chips and Salsa

    $15.50
Out / Picked up1
  • #104031 min

    Ana

    Delivery

    Pad Thai, 4× Spring Rolls

    $29.90On the way

Orders Queue Board

A kitchen queue with New, Preparing, Ready and Out columns. Drag cards or use the buttons and arrow keys to advance them, and hear a short chime when a new order arrives.

↗
80 mm thermal

Corner Kitchen

214 Bedford Ave, Brooklyn, NY 11249

(718) 555-0199

Order

#1048

DateNov 5, 2026 · 7:42 PM

TypeDelivery

CustomerMaya Thompson

Phone(347) 555-0123

Address88 N 6th St, Apt 4B

ItemAmount

2xSmash Double$23.00

Medium well

Add bacon +2.00

No onions

1xCrinkle Fries$4.25

Large

1xVanilla Shake$5.75

2xGarlic Aioli$1.50

Subtotal$34.50

Delivery fee$3.50

Coupon WELCOME5-$5.00

Total$33.00

PaymentCard on delivery

Bring the card machine

NoteRing twice, side door on 6th St.

Scan to track your order

Thank you! See you soon.

Receipt 80mm

An on-screen thermal receipt at real 80 mm or 58 mm width that feeds out of a printer slot and prints only itself with the matching page size.

↗
Corner KitchenFree · Installs in seconds

Reorder in two taps and track every delivery.

  • Live order tracking
  • Works offline

Install App Banner

An install invite for web apps: an Install button wired to the browser prompt, manual Share then Add to Home Screen steps on iPhone, and a remembered snooze.

↗
Corner KitchenPickup · 15 min
Smash DoubleTwo patties, American cheese$11.50
Truffle FriesParmesan, rosemary salt$6.00

Order Cart Bar

A floating View order bar that slides up once the cart has items, bumps the count when it changes and shows progress toward a free delivery threshold.

↗

Your order

4
  • Smash DoubleMedium · Extra cheese$23.002
  • Truffle FriesLarge$6.00Extra crispy, please1
  • Vanilla Bean Shake$6.501

Your details

Payment

Coupon

Subtotal$35.50
Delivery$2.99
Total$38.49

Order Cart Drawer

A cart sheet with quantity steppers, line notes, delivery or pickup, area fees from props, payment choice, a coupon field and a Send order button with a confirmation state.

↗
CKCorner KitchenOpen until 10 pm · replies in ~5 min
Order on chat, 2 unread
Book a tableAsk us

Chat Order Button

A pill button with a speech bubble icon that opens a chat with a prefilled message, with a hover glow, sizes, variants and an unread dot.

↗
Corner Kitchentyping...

Chat Bubble Typing

A chat preview with a business avatar, a typing indicator and messages that appear word by word with a natural rhythm, followed by a reply button.

↗
Most ordered

Steakhouse Burger

7 oz chuck and brisket patty, aged cheddar, charred onion jam, brioche bun.

$15.50
How should we cook it?Choose 1Done
Choose a sideChoose 1Required
Add extrasChoose up to 3Optional
Remove ingredientsTap to leave outOptional
1

Order Item Drawer

A bottom sheet on narrow screens and a side drawer on wide ones for customizing one item: single and multiple choice groups, removable ingredients, quantity, a note and a live total on the add button.

↗

Corner Kitchen

Pick a location for pickup

Checking hours
  • Atlantic Ave · 412 Atlantic AveChecking hours
  • Smith St · 88 Smith StChecking hours
  • Court St · 230 Court StChecking hours

Open Now Badge

A status pill that reads a weekly schedule and shows Open now, Closing soon, Opening at or Closed today, with overnight ranges, holidays and time zones. Ships a pure getOpenStatus helper.

↗