Effects

387 copy-paste items. Text, motion, backgrounds, hover and pointer effects, buttons and transitions. Hover a card to play it.

Text · 53View all

CH 07 · feed lost
03:14:07
OFFLINE
Node fra-02Retrying in 4s

Glitch Text

RGB-split slices that stutter across the text, like a corrupted signal.

↗
Model R · Launch mode2.1 seconds0–100 km/h · 1,020 hp

Motion Blur Text

Text that snaps into place dragging a blurred trail behind it.

↗
Malibu · Surfrider6–8 ft
14 s period · offshore · 18°C

Wave Text

Letters bob up and down in a rolling wave, each one a beat behind the last.

↗
~/studio — zsh
$ npx shadcn add
@hyperblur/
1 file written in 0.8s

Typewriter

Types one or more strings with a blinking cursor, deleting and moving on to the next. Width stays stable.

↗
Rec 00:12
f/1.8 · 1/250 s · ISO 200

Blur Text

Words come into focus from a heavy blur with a soft upward drift, staggered.

↗
New season drop
Free shipping over $80
Scroll to speed up

Scroll Velocity Text

A repeating text strip that drifts on its own and speeds up, slows down or reverses with the page scroll velocity.

↗
Gallery 4Nov 8 – Jan 12
VOIDSculpture after absence
Hover to fill

Stroke Text

Hollow outlined text that fills with color in a left to right sweep on hover.

↗
Keynote · Nov 18Nova OneThe quietest laptop we have ever built.Pre-orders open 09:00 PT

Shiny Text

Text with a band of light that glides across the glyphs on a loop, like a reflection passing over brushed metal.

↗
Changelogv4.2 / Nov 3

Incremental caching cuts cold starts by 38%.

Click the headline to replay

Text Scramble View

Text that churns through random glyphs and settles left to right when it scrolls into view. Click or press Enter to replay it.

↗
MC

New message to

Maya Chen

Hey Maya, quick update: staging is green. Shipping the patch after lunch, no rush on your side.
Draft savedSend

Typewriter Human

A typewriter with uneven rhythm: longer beats after punctuation, the occasional wrong key noticed late and backspaced. The sequence is seeded, so it is identical on every render.

↗
invoices from March 2026. invoices from last quarter. invoices from Acme Corp. invoices overdue by 30 days
  • INV-2041Acme Corp$4,200
  • INV-2038Northwind$1,840
  • INV-2033Halden & Co$960

Typewriter Swap

Types a phrase, holds it, then deletes only what differs before typing the next one. A shared opening stays on screen and is dimmed while the rest is erased.

↗
Good software disappears. What stays is the feeling that everything was exactly where you expected it.
IRIris Romero, Head of Design at Fieldwork

Text Line Rise

Finds where the paragraph actually wraps and lifts each visual line out of its own mask with a skew that straightens on arrival. A hairline draws above each line just before it rises.

↗
Spring dropEnds Sunday
Free shipping on orders over $80

Text Path Flow

A line of text streams along a wave that slowly breathes and shifts, with a dotted guide underneath and soft fades at both ends. Drawn in SVG, so it scales cleanly to any width.

↗
Built for founders, designers, engineers, agencies who ship weeklyTrusted by 4,200 teams in 38 countries

Text Swap Pill

A sentence with a tinted pill whose word tumbles out and in while the pill eases to the new width and color. A hairline inside the pill shows the time until the next word.

↗
Tromso, NorwayJun 14 to 16
Midnight Sun
Three nights, 28 artistsTickets

Text Shuffle In

Every letter slides through a few other letters before it lands on its own. Plays when the text enters the viewport and again on hover or focus.

↗
Manifesto02 / 07

Every great product starts as a quiet idea, then the small details catch the light one word at a time.

Text Scroll Words

A paragraph that wakes up word by word, from dim and blurred to bright and sharp, as it scrolls through the viewport.

↗
Small batch coffee

Ember & Oak

Roasted in Lisbon, shipped within two days of the roast.

Shop beans

Text Circular

Text set around a circle that turns slowly. Hovering speeds it up and spins it the other way. The center takes any content.

↗
Variable weight300 to 900
Heavy hands

Slide across the letters and feel them push back.

Text Pressure

Every letter swells in weight and size as the pointer gets close, with a slow breathing wave when nothing is touching it.

↗
vault / access
CLEARANCE GRANTED

operator 0x4f2a / session open for 14m

3 of 3 checks passed

Text Scramble Hover

Letters near the pointer flip to random glyphs and settle back one by one once it moves away.

↗
Issue 07 / Design notes
Slow design,for fast teams.
By Mara Lindqvist, 6 min read

Text Mask Reveal

Lines or words slide up out of an invisible mask with a stagger when the block scrolls into view.

↗

Good copy is short, specific and a little bit surprising.

Writing notes, p. 12

Text Highlight Marker

Chosen words get a hand-drawn marker stroke that sweeps across them one after another.

↗
Revenue today$48,219.40
+12.4% vs yesterdayGoal $60,000

Text Odometer

Each digit rolls vertically to its new value like a mechanical counter, with separators and symbols left in place.

↗
Studio NorthlightTurn ideas into landing pagesPolished product pages, shipped in days.

Text Flip Words

A sentence with one slot that flips through a list of words in 3D while the line resizes to fit each one.

↗
Manifesto

Interfaces should feel like paper: quiet, tactile and a little bit alive.

Text Fill Scroll

A paragraph that fills with color word by word, left to right, as it scrolls through the viewport.

↗
TURBOTilt the logo with your pointer.

Text 3D Extrude

Text built from a stack of shifted layers that forms a solid extrusion and tilts with the pointer.

↗
Liquid lightAurora palette / 04 blobs

Text Liquid Gradient

Text filled with soft color blobs that drift through each other, over a blurred glow of the same colors.

↗

Motion & reveals · 32View all

Avg. delivery · Brooklyn
38min
Courier on the way, 2.4 km left

Speed Lines

Slanted bars streaking across a container. Drop it behind a hero or a card.

↗
Now playing
Midnight Drive
Nova Lane · Afterglow
Hover to replay

Shutter Reveal

Content is uncovered by slanted bars that slide away one after another.

↗
LP
Lena Park2m
Shipped the new onboarding flow
OH
Omar Haddad5m
Left 3 comments on Checkout v2

Fade In View

Fades and slides its children in when they scroll into view. Directional, with delay and replay.

↗
Trusted by product teams at
NorthwindLumenArcadiaPolarisKitefield
SOC 2 Type II99.99% uptimeGDPR readySSO and SCIM24/7 support

Marquee

Infinite horizontal scroller for logos, text or cards. Seamless loop with soft edge fade.

↗
Plume 2.0 is live

Know what brokebefore users do.

Plume watches every endpoint, trace and deploy, then tells you what changed in plain words.

api.plume.dev / overview
99.98%Uptime
182 msp95 latency
0.04%Error rate
  • POST /v1/checkout112 ms
  • GET /v1/orders94 ms
  • POST /v1/webhooks640 ms
Deploy 4f2a9c p95 down 24%

Hero Stagger Intro

A hero section whose eyebrow, headline lines, subtitle, buttons and product visual enter one after another with a rise, blur and fade. Change the replay key to play it again.

↗
LIVEMarket wireHover to pause
  • FED: Fed holds rates steady, 09:42
  • OIL: Oil slips below $71 a barrel, 09:38
  • TECH: Nvidia tops revenue forecast, 09:31
  • FX: Euro firms on jobs data, 09:24
  • BOND: Treasury yields edge lower, 09:17
  • GOLD: Gold hits two-week high, 09:05
  • AUTO: Tesla recalls 12k vehicles, 08:58
  • FX: Dollar slips against yen, 08:49

Ticker Vertical

A news ticker that scrolls upward in a loop. The row passing through the middle lights up, the edges fade out, and hover or focus pauses it. Two columns scroll in opposite directions.

↗

Q3 · Edge network

A quarter on the network, in three numbers

  1. 2.4BRequests served last quarter
  2. 99.995%Edge uptime across 41 regions
  3. 186msMedian cold start, worldwide

Motion Stat SequenceNew

A pinned report section where three numbers take turns: each one counts up while its rule draws and a delta chip pops in, then dims as the next takes over. A rail on the left tracks the whole sequence.

↗
IdentityMotionProductLaunch
Brand systemsDesign opsWeb platformsCampaign filmType designPackagingPrototypingArt direction

Motion Skew MarqueeNew

Two marquee rows that react to scroll speed: the big outlined words lean, stretch and fill with light as you scroll faster, and both rows flip direction with the scroll. A speed gauge reads the velocity live.

↗

We stopped counting releases and started measuring how it felt to use. Support tickets fell by half.

Mara Ellison, Tessel

Motion Karaoke ParagraphNew

A pinned quote that fills with light letter by letter as you scroll, like karaoke lyrics. Phrases wrapped in asterisks take the accent and get a marker stroke once read, and a counter tracks the words.

↗
  1. 1Plan · 14 issues
  2. 2Build · 3m to preview
  3. 3Ship · 5% canary
  4. 4Learn · +22% activation
Plan01 / 04

Scope the sprint in one board

Drag issues in, set the goal, and the estimate updates live.

14issues

Motion Flip SequenceNew

A pinned card that flips in 3D from one step to the next as you scroll, swapping faces while its back is turned. A sheen crosses the card mid-flip, the floor shadow squeezes, and a deck behind shows the steps left.

↗
import { createServer } from "@tessel/edge";

const app = createServer({ region: "auto" });

app.get("/health", () => ({ ok: true }));

app.post("/orders", async (req) => {
  const order = await req.json();
  const id = await db.orders.insert(order);
  return { id, status: "queued" };
});

app.listen(8080);

Motion Code RevealNew

An editor window that types its code as you scroll, with natural pauses at line ends, syntax colors, a caret and a minimap filling in. When the last line lands, a terminal slides up and runs it.

↗

Field notes / No. 14

The quiet craft of edges

Every page ends somewhere. The best interfaces do not cut their content off with a hard line, they let it dissolve into the margin so the eye knows there is more without being told.

A progressive blur does that work. Each layer softens a little more than the one before, and the result reads as depth instead of a wall.

Scroll slowly, and notice how the lettering loses its edges first and its shape last. That order is what makes the effect feel natural.

Use it above a sticky header, beneath a long list, or beside a carousel that continues past the frame.

Field notes / No. 14

The quiet craft of edges

Every page ends somewhere. The best interfaces do not cut their content off with a hard line, they let it dissolve into the margin so the eye knows there is more without being told.

A progressive blur does that work. Each layer softens a little more than the one before, and the result reads as depth instead of a wall.

Scroll slowly, and notice how the lettering loses its edges first and its shape last. That order is what makes the effect feel natural.

Use it above a sticky header, beneath a long list, or beside a carousel that continues past the frame.

Edge Gradual Blur

An overlay for the edge of a container that blurs the content under it a little more with every pixel, built from stacked backdrop-filter layers.

↗

Trusted by 2,400 teams

  • Orbitly
  • Kestrel
  • Plinth
  • Moonbeam
  • Fathom
  • Tessera
  • Brightside
  • Quillon
  • Harbor & Co
  • Lumenary
  • Tessera
  • Brightside
  • Quillon
  • Harbor & Co
  • Lumenary
  • Orbitly
  • Kestrel
  • Plinth
  • Moonbeam
  • Fathom

Logo Loop Belt

An endless belt of wordmark chips with faded edges. It slows down or stops on hover and can run a second row in the opposite direction.

↗

Essay / 7 min read

The quiet craft of slow software

Every product has a pace. Some feel like a conversation, others like a queue at the post office, and the difference is rarely about speed alone.

A good interface waits for you without making you wait. It keeps your place, answers before you finish the question and never asks you to start over.

That patience is designed, one small decision at a time: the empty state that tells you what comes next, the undo that is always one tap away.

Teams that build this way ship fewer features and more trust. They measure the seconds a person saves, not the minutes they spend.

So the next time something feels calm, look closer. Someone worked hard to make it look easy.

Scroll Progress Bar

A thin gradient bar pinned to the top of the page or a container, with a percentage chip that rides its head.

↗

Field notes / Day 4

Leaving the valley before sunrise

Above the treeline

2,640 m

The last switchback opens onto bare rock and a sky that has not decided what colour to be.

Scroll Parallax Layers

A dusk scene built from three SVG layers (sky, hills, pines) that drift at different speeds as it crosses the viewport.

↗
01 / 04

Capture

Drop in notes, links and files from anywhere. Everything lands in one inbox.

Scroll Pin Steps

A pinned stage that swaps its content step by step as you scroll, with clickable step dots and a progress line.

↗

Spring collection

Eight colorways, one weekend

Dune#F6C177
Lagoon#5EEAD4
Orchid#E879F9
Moss#A3E635
Ember#FB923C
Glacier#BAE6FD
Cocoa#D6A77A
Citrus#FDE047

Scroll Stagger Grid

A grid of tiles that fly in one after another from alternating directions as it scrolls into view, and fly back out in reverse.

↗

Ten days by rail

Days 1-2

Lisbon

Tram 28 at dawn and pastries on the hill.

Days 3-4

Porto

Riverside cellars and the blue-tiled station.

Day 5

Salamanca

Golden stone, quiet courtyards, late dinners.

Days 6-7

Madrid

Three museums, one long lunch, a night train.

Days 8-9

Valencia

Orange groves and a beach that stays warm.

Day 10

Barcelona

Rooftops, markets and the last sunset.

Scroll Horizontal Track

A pinned section where vertical scrolling slides a strip of cards sideways, with a progress rail and a card counter.

↗
48,200 Trees planted this year

Scroll Counter Ticker

A pinned section with a big odometer whose value is tied to scroll progress. Digits roll vertically and carry over like a real counter.

↗
Week 101 / 04

Discover

Interviews, audits and a clear brief before any pixel moves.

12 interviews
Weeks 2-402 / 04

Design

Flows, type and a component library the whole team shares.

48 components
Weeks 5-903 / 04

Build

Small slices behind flags, tested on real devices.

31 releases
Week 1004 / 04

Launch

A calm rollout with monitoring, docs and a clean handover.

99.98% uptime

Scroll Sticky Stack

Cards that stick to the top and pile on each other. Each card shrinks and dims a little as the next one slides over it.

↗

Overlays & backgrounds · 70View all

Tromsø · 69.6° NNorthern lightsKp 6 · tonight 22:00 – 02:00

Aurora

Soft aurora background of blurred gradient blobs drifting slowly. Pure CSS.

↗
Perseids · peak tonight

“We are all in the gutter, but some of us are looking at the stars.”

Oscar Wilde · 1892

Meteors

A shower of shooting stars with fading tails over a faint, twinkling star field. Pure CSS, fills its positioned parent.

↗
TROMSØ · 69.6° N · KP 6

Chase the lights

Clear skies after 22:00. Small groups, warm suits included.

Polar Veil

Aurora curtains made of fine vertical rays that sway and shimmer over a night ridge, with twinkling stars and a light film grain. Pure CSS and SVG, no canvas.

↗

Hover & pointer · 37View all

ProMost popular
$24per month
  • Unlimited projects
  • Priority support

Glow Border

A card whose border lights up around the cursor, like modern SaaS cards.

↗
Linen overshirt
Sand · M · $64
Add to bag
Click the button

Ripple Click

A material-style ripple that spreads from the exact point you click.

↗
PlansMonthlyYearly −20%
Starter
$0/mo
  • 3 projects
  • Community
Start free
ProPopular
$18/mo
  • Unlimited
  • Analytics
Upgrade
Team
$49/mo
  • 10 seats
  • SAML SSO
Contact

Spotlight Card

A card lit by a soft radial spotlight that follows the pointer and catches the border. Wrap several in SpotlightGroup and one light spans the whole row.

↗
Your mixes this week5 playlists

Night Drive · now playing

Fan StackNew

A tidy stack of cards that fans into an arc around a low pivot on hover. The card under the pointer lifts and pushes its neighbours aside, and a click brings it to the front of the stack.

↗
Serviceseu-west · 4 running

Spotlight Border ListNew

A list where one light source travels across all rows at once and lights their borders where it passes, while a soft highlight glides to the row under the pointer.

↗
Spring showcaseRoom 3 · 5 works

Tilt GalleryNew

A strip of artworks hung in 3D space: every card turns to face the pointer like a sunflower, the closest one widens and steps forward, and the whole wall leans with a sliding sheen.

↗

Expanding Index RowsNew

A project index where hovering a row opens it in place with a thumbnail, a one-line summary and key numbers, while the other rows fade back. Hover intent timing keeps it calm as the pointer moves down the list.

↗
Pro planMost popular

$12 / month

Unlimited projects, priority builds, and a custom domain.

Border Star Orbit

A card whose border carries a glowing four-point star that circles the perimeter, dragging a trail of fading color behind it.

↗

Chapter 3 · 12 min read

The house on Alder Lane

Nobody had lived there since the winter of 1988, yet the porch light came on every night at nine.

Cursor Ghost

A faint ghost that trails the pointer on a spring, leans into its motion, looks where it is going and leaves a fading afterimage.

↗

Transitions & slides · 34View all

Quiet surfaces and sharp type.

Morph Tabs

Tabs where the container smoothly resizes to each panel, panels crossfade with a slight scale, and a pill glides between triggers.

↗
Spring 2027 · Drop 03

The Field Collection

Linen, waxed cotton and recycled wool. Shop the drop →

Curtain Stagger Wipe

Vertical bars sweep off one after another, each trailed by a colored layer, then drop back in reverse to cover the content.

↗
01

Spring drop 01

Field Jacket, Olive

Recycled ripstop, 3 colors

$168

Transition Diagonal Slice

The next view arrives cut into slanted bands that slide in along their own angle, alternating from top and bottom. The view behind recedes and dims while the bands lock together.

↗
Field notes

Salt, wind and the long coast road

Three weeks along the Atlantic edge, from Porto to Sagres.

p. 14

Transition Page Turn

The right half of the view lifts at the spine and turns over like a magazine page, with the next view printed on its back. Shading follows the angle of the page as it travels.

↗
TimeDestinationGateStatus
08:40LISBONB12Boarding
09:05OSLOA04On time
09:30MADRIDC11Delayed
09:55VIENNAB02On time

Transition Split Flap

The view is cut into flaps hinged at the middle, like a station board. Each column drops its top half in turn, left to right, and settles with a small bounce.

↗

Step 1 of 3

Plan the route

Drop pins, we work out the stops and the fastest order.

Transition Parallax Slide

A push navigation: the new view slides over the old one, which drifts back and darkens under it. Children marked data-depth 1 to 3 inside either view travel at their own speed for depth.

↗
Alpine dusk
Photo 1 of 4
Stories

Weekend in Lisbon

Four photos, four seconds each. Tap the sides to skip.

0:16 total

Image Ken Burns

A story-style slideshow with slow zoom and pan on every photo, crossfades, segmented progress bars and tap zones for previous and next.

↗

Buttons · 73View all

Ship the quiet parts.
Components you copy, own and never update.
Read the docs

Shimmer Button

A dark pill with a soft highlight sweeping across its surface and an inner glow that blooms on hover.

↗
~/orbit-api

$ hyperblur build

42 files compiled in 3.1s

edge network ready in 6 regions

Button Border Spin

A pill button with a conic gradient comet orbiting its edge around a solid inner face. The border spins all the time or only on hover.

↗
Danger zoneorbit-api

Removes the project, its 14 deployments and every environment variable. This cannot be undone.

Confirming in 3 seconds. Press Escape or Cancel to stop.

Button Countdown Confirm

A destructive button that arms on the first press, drains a countdown ring next to a Cancel button and confirms on its own at zero.

↗

From the journal

Release notes, guides and the odd opinion about easing curves.

Button Underline Grow

A text link or button whose underline grows from the center while an arrow nudges forward. After it is used, the text shifts to a visited color.

↗
Studio Kiln2 slots left for Q1

Brand systems for hardware startups.

30 min · Free

Button Marquee

On hover the label slides away and a looping ticker of the same words runs through a soft edge fade. A diagonal arrow chip swaps for a fresh arrow at the same moment.

↗
Pro$12 / seat / mo
  • Unlimited projects and version history
  • Priority builds on dedicated runners
14 days, no card

Button Wave Letters

While hovered, a wave rolls through the label letter by letter, lifting each glyph and tinting it at the crest. A hand-drawn squiggle draws itself underneath and keeps flowing.

↗

Start your free trial

14 days, no card required.

nora@brightside.studio

Button Submit Morph

A submit button that collapses into a circle with an orbiting spinner, then expands into a green success pill or a red error pill that shakes. It follows the promise returned by onSubmit.

↗
MK

Mira Kovac

@mirak · 2h

Shipped the new onboarding today. Activation is up 18% in the first week.

Button Toggle Count

A pill toggle for like, save, bookmark or star. The icon fills from the bottom with a spring pop and sparks, and the count rolls digit by digit like an odometer.

↗

#482 · feat/billing-webhooks

Retry failed payment webhooks with backoff

✓

All checks have passed

12 successful checks · no conflicts

Button Split Menu

A split button whose chevron opens a menu of alternative actions; choosing one swaps the primary label with a rolling transition. Full keyboard support with arrows, Home, End and Escape.

↗
Notes

Trip to Lisbon

Book the tram tour for Saturday

Q3 planning

Hiring plan, two senior roles

Groceries

Oat milk, lemons, basil

Button Speed Dial

A floating action button that fans its actions out on an arc or stacks them upward, with a staggered spring, a dimming halo and labels. The plus turns into a close mark.

↗
Are we still on for 7?
Running 5 min late, order for me
Tap to send · hold for options

Button Press Radial

Tap to run the main action, or long-press to open a radial menu around the button and drag toward an option to pick it on release. A ring fills during the hold and a beam follows your finger.

↗

How we cut deploys to 90 seconds

6 min read
9,284shares

Social Share Counter

A share total with odometer digits, a breakdown bar by channel and a chip per channel with its own count. Sharing rolls both numbers, grows the segment and floats a +1 from the chip.

↗
LV

Lena Vargas

Design engineer. Writing about motion and type.

followers12,839 followers

Social Follow Count

A Follow button joined to the follower count, where following rolls the digits up by one and slides your avatar into the front of the stack. The label flips to Following with a check that draws itself.

↗
billing-apiproduction

Removes 3 services, 12 env vars and the custom domain api.northwind.io.

Button Safety Cover

A red button sealed under a hazard-striped glass cover. The first press flips the cover up on its hinge, the second press within the time window confirms.

↗
StripeYour October invoice is ready
Linear4 issues assigned to you
NotionWeekly digest for Product

Button Delete Undo

Deleting blurs the button away and slides in a toast with a draining bar, an Undo button and a Cmd+Z shortcut. If the window runs out the deletion is committed.

↗
Remote actionsOnline · 82%

Button Countdown Abort

Starts a short countdown with a rolling digit and a strip of LED segments that switch off every half second. Clicking again or pressing Escape aborts before anything happens.

↗
DraftProposal for Northwind

Hi Elena, attached is the revised scope with the analytics add-on and the new delivery dates for Q1.

Button Archive Discard

A paired control where the hovered side stretches and the other shrinks to its icon. Archive drops a page into a box, Discard crushes its cross into a checkmark and takes the full width.

↗
InboxSwipe left to delete
Priya RamanRe: Q3 vendor contracts, final redlines attached
Daniel OkaforLunch Thursday? The new ramen place opened

Button Swipe Dissolve

A list row you drag left over a red well whose bin pops once you pass the threshold. On release the row dissolves into drifting particles from right to left, then the space collapses.

↗
  • 4 projects and 1,286 files erased
  • Pro plan ends today, no refund

Button Irreversible

A two-step danger row that expands in place into a warning with marching hazard stripes, a list of consequences and a checkbox. The final button stays locked until the user acknowledges.

↗
Early access

Ship the part your users actually see.

Two minutes to install. No config, no lock-in.

Button Spotlight

A soft light follows the pointer across the face while the border brightens near the cursor. It drifts on its own until the pointer arrives.

↗
Aurora StudioPrivate beta

A calmer way to review design work. 1,240 teams are already on the list.

Button Slide Fill

Color fills from the side the pointer enters and drains out through the side it leaves, with the label color inverting in sync.

↗
Fri 14 Nov, Warehouse 9

Aurora Nights

Eight hours, three rooms, one sunrise set.

Button Neon Pulse

A neon outline with a breathing glow that quickens on hover. Each click sends a ring ripple out from the pointer.

↗
Brand and web studio, Lisbon

Atlas & Oak

We take on six projects a year and answer every email.

Button Stacked Text

The label is stacked above an alternate label. Hover rolls the letters upward one by one to reveal the second line.

↗

Loaders · 36View all

search-index / rebuild.log
Loading

Rebuilding search index

1,284 of 3,906 documents

shard 02 / 06 · 41s

Loader Gears

Three toothed gears mesh and turn in opposite directions, each at the right speed for its tooth count.

↗
Loading

Maison Alba

Setting your table

Friday, 7:30 pm · 2 guests

Usually under a minute

Loader Hourglass

An hourglass whose sand drains through the neck, then flips over and refills for the next round.

↗
Run 4821Sequencing
Loading

Sample HG-0097

Whole genome, 30x coverage

Reads

1.2M

Quality

Q38

Time left

06:12

Loader DNA Helix

A double helix of dots twists in sine motion, with depth shading and rungs that stretch between the strands.

↗

Your devices

Fern Watch

Charging, 42 min left

Charging

Fern Buds

Fully charged

Charging 100%

Charging case

25% remaining

Charging 25%

Loader Battery Fill

A battery icon fills with segments, pulses when full and starts over. Pass a value to show a fixed charge level instead.

↗
Wi-Fi
Loading

Searching for networks

Keep your phone near the router

Home 5GSaved
Cafe GuestOpen

Loader Signal Bars

Signal bars of growing height light up one after another, like a device searching for a connection.

↗
Export launch kit.zip
Packing

48 files · 312 MB

Press release, 21 images,

2 voice tracks, embed code

We will email the link to maya@northwind.io

Loader File Morph

A single shape morphs between a document, an image frame, an audio disc and a code hexagon, with the inner glyph crossfading at each step. Built for exports and format conversions.

↗
Loading

Syncing workspace

Pulling 3 sources into Northwind

  • Calendar
  • Documents
  • Issues, 214 of 380

Loader Orbit

Three glowing dots travel around concentric rings at different radii and speeds, with a beating core in the middle.

↗

brand-assets-v3.zip

48.2 MB · Design team

Uploading, 31 of 48 MB
Cancel

Loader Progress Stripes

A determinate progress bar with moving stripes, a soft glint at the leading edge and a tabular percentage.

↗
#design-crit· 4 online
JKPushed the new tokens, can you check?
On it, one sec
Priya Nair is typing

Loader Typing

A chat typing indicator with three hopping dots in a bubble, plus an optional avatar and sender name.

↗

Micro · 52View all

Delete project “Atlas”?
This removes 214 files for good.
Press and hold to confirm

Hold Button

Press and hold to confirm. A fill sweeps across while held, letting go early snaps it back.

↗
Push notifications
Mentions and replies
Weekly digest
Every Monday at 9:00
Do not disturb
22:00 – 07:00

Spring Toggle

A switch whose knob squishes and overshoots when you flip it.

↗
NV
Nora Vance
Product designer
Ondine Studionora@ondine.studioLisbon · GMT+0
Hover to flip

Flip Card

A card that flips in 3D to reveal its back on hover, focus or click. Crossfades with reduced motion.

↗
SyncingSyncing12 files
UploadingUploading64%
RenderingRenderingframe 82

Lattice Loader

A compact loading indicator of dots or bars pulsing in a diagonal wave.

↗
Arc desk lamp
2,318 reviews
4.5

“Warm light, zero glare. My desk finally feels calm.”

Star Rating

Interactive star rating with hover preview, half steps and keyboard control.

↗
~/design-files4 items
Brand guide.pdf4.2 MB
Launch plan.doc86 KB
Hero render.png1.9 MB
Budget Q4.xls212 KB

Right-click a file for actions

Context Menu

A right-click and long-press menu that opens at the pointer and flips at the edges. It has icons, shortcuts, a submenu, a danger item and full keyboard control.

↗

Check your inbox

We sent a 6 digit code to ada@fernhill.example

Code Slots

A code or PIN display where every character is a vertical reel that spins and settles on its value, with a short glow when each reel locks. Changing the value replays it.

↗
Inbox12 unread
PR

Priya Raman

Signed the vendor agreement

TB

Tomas Berg

Can we move standup to 10?

Conversation archived

Swipe it away, or undo

Swipe Toast

A toast you flick sideways to dismiss. It resists with a rubber band, flies off past a threshold and carries an undo chip. Escape and the arrow keys dismiss it too.

↗
MessagesSwipe either way

Maya Okonkwo

Re: Lighting specs for the studio build

9:41
Swipe or use the left and right arrow keys to reveal actions

Jonas Eklund

Invoice 2041 is ready to review

Mon
Swipe or use the left and right arrow keys to reveal actions

Swipe Row

A list row that reveals Archive on a swipe right and Delete on a swipe left. It snaps open or closed with momentum, and the arrow keys reveal the same actions.

↗

Watering reminders

Every morning at 8:00

Weekly digest

Care tips on Sundays

Share growth photos

Visible to club members

Gooey Toggle

A pill toggle whose thumb stretches like liquid as it travels, built from two blobs merged by an SVG gooey filter.

↗
Password strength: Good
  • 8+ characters (met)
  • Upper & lower case (met)
  • A number (met)
  • A symbol (not met)

Password Strength Input

A password field with a show and hide button, a four segment strength bar and a checklist of rules that tick as they are met.

↗
  • New YorkUTC-5
  • ChicagoUTC-6
  • Sao PauloUTC-3
  • LondonUTC+0
  • LisbonUTC+0
  • BerlinUTC+1
  • TokyoUTC+9
  • SingaporeUTC+8
  • MumbaiUTC+5:30
9 options available

Command Select

A searchable select. Type to filter with highlighted matches, move with the arrow keys, group options and close with Escape.

↗