Hero sections · Hyperblur

Hero Section

A full landing hero: eyebrow pill, headline with a highlighted word, subtitle, two pill buttons, trust items and a framed panel for a screenshot or demo.

↗

Hero Dot Globe

A pure black hero with a huge canvas sphere of thousands of tiny dots that spins on a tilted axis, leans toward the pointer and carries a bright belt drifting the other way. Sparse mono details frame a bottom-aligned headline and an install command.

↗

Hero Dot Earth

A pure black hero with a huge canvas planet of thousands of tiny dots where the continents stand out bright against a sparse ocean. It spins on a tilted axis, leans toward the pointer, with a bottom-aligned headline and an install command.

↗

Hero Dot Saturn

A black hero with a holographic ringed planet built from thousands of square dots: banded latitudes, three rings with gaps that pass in front of and behind the sphere, the planet shadow on the rings, a scan sweep and a dotted projector base.

↗

Hero Dot DNA

A black hero with a holographic double helix of square dots standing on a projector base. Two strands joined by base pair rungs turn about their axis while bright pulses run along the strands and light up each rung they pass.

↗

Hero Dot Orbit

A black hero with a holographic atom of square dots: a glowing nucleus of clustered spheres, faint dotted orbit rings at different tilts and bright electrons with fading trails, floating over a projector base and leaning toward the pointer.

↗

Hero Dot Galaxy

A black hero with a holographic spiral galaxy made of thousands of tiny square dots: a bright core, glowing arms that wind with inner stars moving faster, a sparse halo and a projector base below. A scan band sweeps up through it and it tilts toward the pointer.

↗

Hero Dot Torus

A black hero with a holographic torus or Möbius band built from square dots that keep flowing across its surface, with helical light lanes, rim light and a dotted projector base. It turns slowly on two axes and leans toward the pointer.

↗

Hero Dot Wave

A black hero with a perspective field of square dots rolling as layered waves toward a dark horizon. Moving or pressing the pointer sends out expanding ripples, a scan band sweeps up the field and idle ripples keep it alive.

↗

Hero Dot Text

A black hero where any word is drawn as extruded 3D letters made of tiny dots. The word swings like a pendulum, a scan band sweeps across it from left to right, the signal flickers now and then, and the dots part around the pointer.

↗

Hero Dot Logo

A black hero that turns an SVG path into a hologram of extruded dots that swings like a pendulum, with a bright front face, lit side walls, an upward scan band, brief signal flicker and pointer tilt. Defaults to the Hyperblur mark.

↗

Hero Dot Silhouette

A black hero that turns an SVG or PNG into a hologram of dots: the shape comes from the alpha channel (or from dark pixels when there is none) and the depth from the image tones. It sways gently with an upward scan band. Defaults to a rocket.

↗

Vantage

Sign in

Live · global

12,747events / s

Routes: 7
Blocked: 18,240

Traffic
Threat
Region

Listening for events

Live feedlast 5

····
····
····
····
····

Watch the whole network breathe.

Live traffic and threat telemetry from 28 regions, drawn on one map. Drop it into a status page, a NOC wall or a security console.

28 regions · live arcs · MIT licensed

npx hyperblur add hero-dot-worldmap

Open console

Learn more

Hero Dot Worldmap

A full-width dot-matrix world map in the style of live traffic and threat maps: pulsing city nodes, lifted arcs with bright heads and fading trails, impact rings, a ticking stats panel and a live feed of the last five events. Hover a city to see its label and routes.

↗

Hero Dot Brain

A black hero with a holographic brain made of tiny dots: two hemispheres with winding folds, a cerebellum and a brain stem, seen from a three-quarter angle above a projector base. Signals crawl along the folds and synapses flash while a scan band sweeps up.

↗

Hero Dot Head

A black hero with a stylized holographic bust drawn as horizontal dotted contour lines: skull, brow, nose, lips, ears, dim eye hollows, neck and shoulders on a projector base. It turns its head slowly while a scan line sweeps down and makes the face features flare.

↗

Hero Dot Hand

A black hero with an open holographic hand of tiny dots, palm toward the viewer with a slight three-quarter turn, standing on a projector base with a dotted wrist cuff. The fingers roll in a slow wave and curl a little when the pointer moves toward the bottom of the hero.

↗

Hero Scroll Expand

A framed film still grows from a small card to the full viewport while the headline splits apart and blurs out. A timecode, caption and play button settle onto the expanded frame.

↗

Hero Scroll Morph

Twelve app tiles start scattered around the headline, then snap into a grid, bend into an arc and collapse into a single stack as you scroll. The last line of the headline swaps with each layout.

↗

Finca La Esperanza · Huila

From a hillside in Huila to your morning cup

Single-origin coffee we buy direct, roast in small batches and ship within 48 hours of the roast.

Shop the harvest

Chapter 01

Harvest

Only the ripest cherries, picked by hand over six passes of the same trees.

1,740 maltitude

Chapter 02

Wash

Pulped the same afternoon, then fermented for 36 hours in spring water.

36 hferment

Chapter 03

Dry

Turned every hour on raised beds until the beans settle at eleven percent.

18 dayson the beds

Chapter 04

Roast

Small batches in Lisbon, light enough to keep the panela and plum.

212 °Cfirst crack

Chapter 05

Brew

Fifteen grams, two hundred and fifty of water, and four quiet minutes.

1:16ratio

Hero Scroll Horizontal

A pinned hero that turns vertical scroll into a sideways story, from an intro panel through illustrated chapters with parallax numerals. A chapter rail at the bottom fills as you travel.

↗

Hero Scroll Letters

A giant word cut out of a black plate shows a night sky through its letters, then the camera flies through the O until the whole sky fills the screen. The real headline and booking pill fade in on the other side.

↗

Hero Scroll Curtain

A velvet stage curtain printed with a gold title gathers to both sides as you scroll, its folds bunching and hems lifting. Behind it the spotlight comes up on the season, the buttons and three show cards.

↗

Ledgerly for finance teams

Close the books before lunch

Cards, approvals and reconciliation in one ledger, so month-end stops eating the first week of the month.

1Issue cardsVirtual cards with limits per team, merchant and month.
2Approve spendRouting by amount and department, right from Slack or email.
3ReconcileReceipts matched to bank lines the moment they land.
4Close the monthA clean ledger and an audit trail, ready for your accountant.

Book a 20-minute demo

Marketing team card Virtual · USD

LEDGERLY•••• 4021 · 09/29

Monthly limit$6,400 of $10,000

Waiting for approval 3 requests

MCMaya ChenFigma · annual$1,440Approved

JRJonah ReyesOffsite · Lisbon$8,920Review

PNPriya NairAWS · October$3,215Approved

Bank reconciliation October

1,284 / 1,290lines matched automatically

Stripe payout · Oct 28Matched

Gusto payroll · Oct 31Matched

Month-end close Last 8 months

2.4 days↓ 71% faster

Hero Scroll Stack

A split hero where product panels slide up one over another and the ones underneath tilt back, shrink and dim into a deck. The step list on the left follows the panel on top.

↗

Hero Scroll Mask

An event name starts so large that only a slice of its painted fill is visible, then shrinks into place while the image inside keeps panning. The top bar, facts row and ticket button assemble around it.

↗

Hero Scroll Ring

A ring of product cards seen from above tilts up to eye level and turns as you scroll. The piece facing you is named in the footer with its number and price.

↗

QuantaProductPricingDocs

Your numbers deserve better thana spreadsheet.

Connect Postgres, Stripe or a plain CSV and get dashboards that refresh every minute, with alerts when something moves.

Connect your data

ABCDEF1MonthMRRNewChurnAcctsARPA2Jan61,2402122.9%2,91021.043Feb64,8802362.6%3,01821.494Mar69,4102512.4%3,20421.665Apr73,0202402.3%3,38821.556May78,7602892.0%3,64021.637Jun84,1903021.8%3,90421.56

QuantaProductPricingDocs

Your numbers deserve better thana live dashboard.

Connect Postgres, Stripe or a plain CSV and get dashboards that refresh every minute, with alerts when something moves.

Connect your data

MRR$84.2k+12.4%

Active accounts3,904+318

Net churn1.8%-0.6 pt

Revenue, last 6 months

New accounts

Hero Scroll Wipe

A slanted wipe line sweeps across the whole hero and turns a gray spreadsheet version of the page into a polished live dashboard, headline included. A glowing handle on the line counts the progress.

↗

Helio Energy · since 2019

From one rooftop to forty thousand

Solar and storage for homes, installed by our own crews and monitored for the life of the system.

Get a free roof estimate

2019First installTwelve panels on a garage in Fresno.
2020Home batteriesEvery system ships with storage.
20221,000 homesCrews in four California counties.
2023Community solarRenters can finally join in.
2025Virtual power plantHomes sell power back at peak.
202740,000 rooftopsAnd 312 MW of clean capacity.

Hero Scroll Timeline

A winding line draws itself down the right side as you scroll, lighting milestone nodes and their cards one by one. On the left a year and a running total count up in step.

↗

Hero Scroll Split

A two-line headline on warm paper pulls apart while a slit between the lines opens into a wide view through whitewashed arches. Location, price and a booking button settle at the bottom.

↗

Hero Scroll Depth

A dusk mountain scene in five layers, sky, far ridge, dolomite towers, wooded hills and foreground pines, with the headline tucked between them. Scrolling pushes the camera in and each layer moves at its own depth.

↗

Hero Prism

A glass prism catches a beam of white light and fans it into a living spectrum behind the headline, with a spectrometer scale along the bottom. The spectrum sways on its own and tilts toward the pointer.

↗

Hero Glass Orbs

Clear glass spheres float beside the copy and bend the grid behind them, each with a mirrored lens image, chromatic rim, caustic and a tinted shadow. The orbs drift in depth with the pointer.

↗

Hero Stage Light

A product launch stage: a single fixture sweeps a cone of warm light with drifting dust across a dark room, the pool of light follows on the floor and a sheen glides over the product. Specs sit on a ruled base line.

↗

Hero Kinetic

A poster-scale typographic hero with three lines that each move differently: letters pump like an equalizer, an outlined line slides as a marquee and a color wave runs through the last line, whose letters flip on hover.

↗

Desktop, web and mobile

Plan the sprint on one screen. Ship it from any other.

Tandem keeps your board, standups and releases in sync across every device, even when the train goes underground.

Get Tandem free Download for iOS

Hero Devices

A laptop lid swings open to reveal a live board, then a phone slides in with notifications and a progress chip pops up. Each device sits on its own depth layer and drifts with the pointer.

↗

Hero Gradient Sphere

A split hero with a lit 3D sphere whose gradient mesh swirls inside it, a turning wireframe, an orbit ring with a moon that passes behind, and a row of palette tokens beside the copy.

↗

quill deploy, now with preview checks

From git push to global in one command

Quill installs, builds, tests and ships your app to 31 regions, and tells you exactly what happened along the way.

npx quill@latest deployRead the quickstart

npx quill@latest deploy. Detected Next.js 16 with the app router. Installing 214 packages. Building 48 routes and 3 edge functions. Uploaded 1.2 MB to 31 regions. Preview checks passed (Lighthouse 99). https://acme-store.quill.run

Hero Terminal

A developer hero led by a large terminal that types a command and plays a deploy session line by line, with a filling progress bar, check marks and a live URL, then loops. A copyable command sits above it.

↗

RRelayConnected

Post deal alerts to #revenue the moment they close.

2.1k syncs

TTracklineSyncing

Turn customer feedback into triaged issues.

312 issues

PPagewellConnected

Publish weekly metrics to a shared page.

Every Mon

CCartwheelConnected

Sync orders and fulfillment across stores.

940 orders

RRepolyConnected

Link releases to the deals they unblock.

86 repos

SSketchpadSyncing

Notify reviewers when a file changes status.

41 files

RRelayConnected

Post deal alerts to #revenue the moment they close.

2.1k syncs

TTracklineConnected

Turn customer feedback into triaged issues.

312 issues

PPagewellConnected

Publish weekly metrics to a shared page.

Every Mon

CCartwheelSyncing

Sync orders and fulfillment across stores.

940 orders

RRepolyConnected

Link releases to the deals they unblock.

86 repos

SSketchpadConnected

Notify reviewers when a file changes status.

41 files

BBeaconSyncing

Keep contact owners aligned across both CRMs.

18k records

TTablestoreConnected

Stream changes from any table with row filters.

6 tables

HHelpdeckConnected

Attach account health to every ticket.

1.2k tickets

GGridbaseConnected

Two-way sync with field-level conflict rules.

24 bases

IIcefieldSyncing

Load clean events into your warehouse hourly.

3.4 TB

MMailroomConnected

Log threads to the right account automatically.

9.8k emails

BBeaconConnected

Keep contact owners aligned across both CRMs.

18k records

TTablestoreConnected

Stream changes from any table with row filters.

6 tables

HHelpdeckSyncing

Attach account health to every ticket.

1.2k tickets

GGridbaseConnected

Two-way sync with field-level conflict rules.

24 bases

IIcefieldConnected

Load clean events into your warehouse hourly.

3.4 TB

MMailroomConnected

Log threads to the right account automatically.

9.8k emails

CCartwheelConnected

Sync orders and fulfillment across stores.

940 orders

RRepolyConnected

Link releases to the deals they unblock.

86 repos

SSketchpadConnected

Notify reviewers when a file changes status.

41 files

CChatwellSyncing

Route conversations by plan and region.

570 chats

SSprintlyConnected

Keep sprint status visible to customer teams.

128 epics

LLedgerlyConnected

Mirror invoices, refunds and disputes in real time.

48 events/s

CCartwheelConnected

Sync orders and fulfillment across stores.

940 orders

RRepolySyncing

Link releases to the deals they unblock.

86 repos

SSketchpadConnected

Notify reviewers when a file changes status.

41 files

CChatwellConnected

Route conversations by plan and region.

570 chats

SSprintlyConnected

Keep sprint status visible to customer teams.

128 epics

LLedgerlySyncing

Mirror invoices, refunds and disputes in real time.

48 events/s

GGridbaseConnected

Two-way sync with field-level conflict rules.

24 bases

IIcefieldConnected

Load clean events into your warehouse hourly.

3.4 TB

MMailroomSyncing

Log threads to the right account automatically.

9.8k emails

RRelayConnected

Post deal alerts to #revenue the moment they close.

2.1k syncs

TTracklineConnected

Turn customer feedback into triaged issues.

312 issues

PPagewellConnected

Publish weekly metrics to a shared page.

Every Mon

GGridbaseSyncing

Two-way sync with field-level conflict rules.

24 bases

IIcefieldConnected

Load clean events into your warehouse hourly.

3.4 TB

MMailroomConnected

Log threads to the right account automatically.

9.8k emails

RRelayConnected

Post deal alerts to #revenue the moment they close.

2.1k syncs

TTracklineSyncing

Turn customer feedback into triaged issues.

312 issues

PPagewellConnected

Publish weekly metrics to a shared page.

Every Mon

CChatwellConnected

Route conversations by plan and region.

570 chats

SSprintlySyncing

Keep sprint status visible to customer teams.

128 epics

LLedgerlyConnected

Mirror invoices, refunds and disputes in real time.

48 events/s

BBeaconConnected

Keep contact owners aligned across both CRMs.

18k records

TTablestoreConnected

Stream changes from any table with row filters.

6 tables

HHelpdeckSyncing

Attach account health to every ticket.

1.2k tickets

CChatwellConnected

Route conversations by plan and region.

570 chats

SSprintlyConnected

Keep sprint status visible to customer teams.

128 epics

LLedgerlyConnected

Mirror invoices, refunds and disputes in real time.

48 events/s

BBeaconSyncing

Keep contact owners aligned across both CRMs.

18k records

TTablestoreConnected

Stream changes from any table with row filters.

6 tables

HHelpdeckConnected

Attach account health to every ticket.

1.2k tickets

300+integrations, and counting

Plug into the tools your team already loves

Relaybase keeps your apps in sync with two-way connectors, field-level rules and a full audit trail. Setup takes minutes, not sprints.

Connect your stack Browse integrations

Hero Card Wall

Five columns of integration cards scroll in alternating directions on a tilted 3D plane behind the copy, some lit and syncing. The wall fades into the page under the headline.

↗

Live now · 1,204 teams watching

Watch your revenue move as it happens

Pulse streams every charge, upgrade and churn into one calm dashboard, updated the second money moves.

Connect Stripe Open the live demo

Hero Live Metrics

A hero that ends in a working dashboard: revenue ticks up, the line chart slides a new point in every beat and fresh payments drop into the feed. It pauses offscreen and holds still for reduced motion.

↗

Hero Aurora Lit

A giant dark headline silhouetted against a drifting aurora, rim-lit like an eclipse, with a faint reflection on a glowing horizon line. Quiet, nocturnal and built around the type.

↗

Hero Light Ribbon

A twisting ribbon of fine light strands sweeps from the bottom of the frame to the top corner, breathing slowly while bright pulses race along it. Copy and stats sit in the open space.

↗

Hero Swiss

A minimal editorial hero on paper with a visible twelve-column grid, a huge tight headline that rises line by line, a single accent dot and a numbered index of services. Light by default, with a dark variant.

↗

Margin for teams

Write the docs your team will actually read

Margin turns scattered notes, specs and decisions into one calm, searchable library. Drafts stay private until they are ready, and every page knows who owns it.

Start writing free See how teams use it

Read about in

The Morning Ledger
Fieldwork
Paper & Pixel
Common Room
Northwind Weekly
Studio Journal
The Product Desk
Quiet Hours

Hero Editorial

A light, magazine-style hero on warm paper: a large serif headline with an italic word that gets a hand-drawn underline, a floating collage of paper cards and a slow marquee of press names.

↗

Hero Orbs

A dark waitlist hero: three blurred gradient orbs drift on slow orbits behind a frosted glass card with the headline, a validated email form with a success state, and a row of avatars.

↗

Hero Prompt

A centered hero built around a large prompt box: auto-growing textarea, Enter to send, a rotating placeholder, suggestion chips that type themselves in and a glow that pulses while the box is focused.

↗

Hero Spotlight

A dark hero where a soft spotlight follows the pointer, revealing a hidden dotted grid, floating metric chips and a brighter copy of the headline. It drifts on its own path when nobody is pointing.

↗

Hero Particles

A constellation hero: drifting points linked by proximity lines that lean toward the pointer, behind a centered headline with a shimmering gradient phrase and a copyable install command.

↗

Hero Beams

Vertical light beams fall and fade toward a glowing horizon arc, under a headline that splits into red and cyan on hover. Three stats count up when the hero scrolls into view.

↗

Hero Aurora

A dark, centered hero with drifting aurora ribbons, a shining pill badge and a headline that sharpens in word by word over a fading grid.

↗

Hero Grid

A technical hero with a perspective grid floor running toward a glowing horizon, a headline that decodes into place and a copyable install command.

↗

NewBill pay with approvals is live

Your company's money, finally in one place

Cards, bills, payroll and real-time reporting in a single workspace. Close the books in hours instead of weeks.

Open an account Talk to sales

Free for 30 days
No setup fees
SOC 2 Type II

Trusted by finance teams at

Kestrel
Orbital
Fathom
Halcyon
Quanta
Northway

Hero Product

A split hero with copy on the left and a layered product mockup on the right that floats gently and tilts in depth with the pointer, above a row of customer logos.

↗

Halden Studio
Brand & product design
Lisbon / New York
Booking Q1 2027

Brands that move. last. sell. matter.

An independent studio building identities, websites and products for companies with something to say. Lisbon and New York, since 2014.

Start a project See selected work

240⁺Launches
12Years
38Awards

Hero Type

A typographic hero in bone on black with a giant tight headline, a rotating italic word, oversized numerals and a two-row keyword marquee.

↗