Blocks

338 copy-paste items. Full page sections: heroes, features, pricing, footers, auth, blog, ecommerce and more.

Hero sections · 50View all

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.

↗

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 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.

↗

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.

↗

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.

↗

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.

↗

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.

↗

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.

↗

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.

↗

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.

↗

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.

↗

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.

↗

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.

↗

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.

↗

Features · 12View all

Features Section

A heading and a grid of feature cards with icon, title and description. Cards lift on hover and carry a soft cursor spotlight.

↗

Features Sticky SwapNew

A scrolling list of feature steps beside a sticky product window that swaps its scene as each step reaches the middle of the screen. A progress rail fills along the steps, and clicking a step jumps to its scene.

↗

Features Live TabsNew

A light tab strip where every tab is a small, running preview of its feature. The selected preview zooms out of its tab into a large stage next to a dark copy card, and the tour advances on its own until you hover.

↗

Features Hover RevealNew

A list of oversized feature names. Hovering or focusing a row slides a floating demo card level with it on a spring and wipes in a live mini demo for that feature.

↗

Features Diagonal FlowNew

Three steps staggered down a diagonal, joined by a dashed curve that a glowing pulse travels along. Each card lights up as the pulse arrives, with the heading tucked into the empty top corner and stats in the opposite one.

↗

Features Mini UINew

Four asymmetric feature cards, each holding a small working piece of the product: a spend limit slider with a meter that turns amber and red, policy switches that rewrite a sentence, a card that frosts over when frozen, and receipts you can match.

↗

Features Before AfterNew

A draggable comparison of a messy spreadsheet week against a clean content calendar. Callout pills flip from the pain to the fix as the divider crosses them, and the stats below update with the handle.

↗

Features Grid Glow

A six-card feature grid under a split header. One soft spotlight follows the pointer across every card at once, lighting borders and surfaces, and cards lift on hover.

↗

Features Alternating

Numbered feature rows that alternate copy and visual sides. Each visual is a small animated product screen (an inbox, a routing flow, a chart) that plays when its row scrolls into view.

↗

Features Tabs

A vertical tab list with a progress bar that advances to the next feature every few seconds, beside a window that crossfades between product mockups. Hover pauses it and arrow keys move between tabs.

↗

Features Checklist

A light paper section with a large serif headline, a two-column ticklist whose check marks draw in one after another, and a pinned summary card that stays in view while the list scrolls.

↗

Features Orbit

A central product mark with feature chips circling it on two counter-rotating rings. Hovering a chip pauses the orbit and slides out its label, and a row of captions sits beneath.

↗

Bento · 12View all

Bento Live WidgetsNew

An operations bento where every tile streams: a scrolling request chart with a rolling counter, a deploy log that writes itself, edge regions with routes drawing across a dotted map, an on-call chat and a day calendar with a moving now line.

↗

Bento Hero SatellitesNew

A light bento with a dark hero tile in the middle and six satellite tiles around it. Pointing at a satellite lights a flowing connector into the hero, which redraws its dial, story and sparkline for that source.

↗

Bento Hover ExpandNew

A six-tile bento whose grid tracks resize around the tile you hover or focus. The opened tile widens and grows to reveal an animated visual, details and a stat while its neighbours compress.

↗

Bento Scan SweepNew

A security bento crossed by one scanning beam on a loop. Each tile reacts the instant the beam passes it: borders flare, radar blips appear, masked secrets briefly reveal, audit rows and badges light up.

↗

Bento ShuffleNew

A white creative-tool bento that glides between three arrangements of the same six tiles. Each tile adapts its content to its new size, and view buttons with a progress line let people pick or pause the layout.

↗

Bento Tilted PlaneNew

An infrastructure bento laid on a tilted 3D plane, tiles lifted to different heights, that settles flat as the section scrolls into view. Accepts a controlled progress or loops by itself for previews.

↗

Bento Product

An asymmetric four-column bento with a revenue chart that switches range, a sprint calendar, working automation toggles, live presence and a typing command bar.

↗

Bento Metrics

A dashboard-style bento with counting stat tiles, a plan donut, a sparkline strip, goal progress bars, an NPS gauge and a 30-day uptime bar.

↗

Bento Integrations

An integrations bento with a central hub, animated data flowing along curved links, connectable service tiles, a scrolling webhook log and an SDK install snippet.

↗

Bento Terminal

A developer bento with a terminal that types a deploy command, a code diff, a rollout status card, a git graph and a per-region latency heat strip.

↗

Bento Editorial

A light, magazine-style bento on paper with serif headlines, grainy gradient covers, a pull quote, a big numeral and a selectable tag cloud.

↗

Social proof · 12View all

Testimonials Section

A heading and quote cards in a looping horizontal strip that pauses on hover. Falls back to a static grid.

↗

Live Activity Proof

A light social proof section pairing a rating summary with a live feed of recent sign ups. New activity toasts slide in at the top every few seconds while older ones drift down and fade.

↗

Proof Tilted WallNew

Testimonial cards laid on a plane tilted in 3D perspective, with columns scrolling up and down at different speeds behind a headline and rating card. Key phrases are underlined in the accent and the wall pauses on hover.

↗

Proof Avatar OrbitNew

Customer avatars ride a large orbit ring that turns to bring the speaker into a fixed spotlight, while their quote assembles word by word beside it. A progress ring around the active face advances the carousel and pauses on hover or focus.

↗

Proof Logo DockNew

A row of customer marks that magnifies under the pointer like a desktop dock. The nearest logo lights up and a story card below swaps in its headline result and quote, with a caret that slides to the active logo.

↗

Proof Video GridNew

A light section with a featured video testimonial and a playlist of clips, every portrait drawn in CSS. Playing a clip runs a progress bar with timed captions, and picking a row in the playlist swaps the featured story.

↗

Proof Review TickerNew

An aggregate rating with a distribution chart beside a vertical ticker that steps one review at a time, the newest card lighting its stars one by one. A band of review-site scores slides along the bottom.

↗

Proof Wall

A masonry wall of testimonial cards in three columns. The outer columns drift slowly in opposite directions under soft top and bottom fades, and pause on hover.

↗

Proof Spotlight Quote

One large serif quote at a time on a paper background. It advances every few seconds with a blur crossfade, and small avatar buttons with a progress ring let visitors pick a quote.

↗

Proof Logo Cloud

A hairline grid of twelve wordmark tiles that go from gray to full color on hover, with a light sweep that travels across the grid and a star rating line below.

↗

Proof Metrics Quotes

Three result cards, each with a big number that counts up when the section scrolls into view, a growing bar, a short quote and the customer behind it.

↗

Contact · 9View all

Contact Booking Calendar

A light booking section: host card, a month calendar with open days, time slots that cascade in, then a validated details form with loading and confirmation states.

↗

Contact Chat Widget

A dark contact section with a support chat card: the greeting types in, quick replies stream an answer, and an inline email card validates, loads and confirms.

↗

Contact Route MapNew

A street map card that draws the route from the station to your studio for walking, tram or bike, with a traveling marker and step list. A validated visit form overlaps the map and confirms with the chosen route.

↗

Contact Channel PickerNew

A light contact section where a sliding radio picker chooses email, call back, video call or live chat. The form below morphs to fit the channel, from a phone field with call windows to a day and slot picker or a chat preview.

↗

Contact Office PostcardsNew

A snap carousel of studio postcards, each with a drawn skyline whose sky, sun and lit windows follow the city's local time. Cards carry a stamp, address, open status and quick contact links, with arrows, dots and arrow keys.

↗

Contact Split Form

A two-column contact section: email, live chat and office hours cards on the left, a validated form with a topic select and a character counter inside a rotating border beam on the right.

↗

Contact Offices

Global offices on a dotted world map with pulsing city markers and arcs from headquarters. Hovering or focusing a city opens its address card, synced with a list showing each office's local time.

↗

Contact Support Cards

Three support channel cards for docs, priority support and community with response-time chips and a pointer tilt, followed by a minimal inline question field.

↗

Contact Minimal Light

A light editorial contact section with a huge serif Let's talk headline, a fill-in-the-blanks sentence form with suggestion chips, and studio details on the side.

↗

Comparison · 6View all

Comparison Tiers

Plan cards side by side that list the same feature rows, so checks, dashes and values line up across tiers. The recommended plan gets a rotating beam border and a badge, and hovering a row highlights it in every card.

↗

Comparison Scorecard

An us versus them scorecard with two overall score rings and a list of benchmark metrics, each with paired bars that grow in and numbers that count up, plus a delta chip per row.

↗

Comparison Calculator

A light pricing calculator where sliders for seats and contacts and a monthly or yearly switch update a bar chart of your price against competitors, with the yearly savings counting to the new value.

↗

Comparison Table

A feature matrix with grouped rows, a sticky header and a glowing highlighted column. Rows highlight on hover and the table turns into stacked cards in narrow containers.

↗

Comparison Versus

A Before and After split with a spinning VS badge between two contrasting panels, and a metric strip whose bars grow to show the change.

↗

Comparison Slider

A light section with a draggable divider over two release timelines. Drag or use the arrow keys to reveal how the same stages shrink from weeks to days.

↗

Cinematic pages · 14View all

Cinema Title Card

An opening title card with anamorphic letterbox bars that close in, a slow push-in on a dusk desert road and a title that settles from wide tracking. A compressed billing block and the release line sit inside the bottom bar.

↗

Cinema Credits Roll

End credits that roll up a dark frame with roles and names aligned on a center gutter, cast and crew sections and a closing studio mark. Hovering or pressing Pause stops the roll.

↗

Cinema Light Leak

A golden-hour coastline shot on film, with warm light leaks drifting across the frame, an edge burn, moving grain, gate weave and a running timecode. The caption sits low on the left like a home-movie title.

↗

Cinema Depth Fog

Five mountain ridges at different depths with fog banks drifting between them, a pale sun and birds crossing the sky. Each layer shifts with the pointer by its own depth, and an altitude scale runs down the right edge.

↗

Cinema Split Reveal

A split-screen poster for two leads, a rain-soaked night harbor against a desert at dusk, divided by a glowing diagonal seam. Hovering or focusing a side pushes the seam across, opens that character's line and recolors the shared title.

↗

Cinema Countdown Leader

A film leader countdown with a sweeping dial, crosshairs and frame labels that ticks down once per second, pops a white frame and gives way to the event details. It can be skipped and replayed.

↗

Cinema Chapter Select

A chapter menu with illustrated poster cards, watched progress and a backdrop that crossfades to the colors of the chosen chapter. Arrow keys move between chapters and the play button resumes where the viewer stopped.

↗

Cinema Now Showing

A now-showing section with a poster, film facts and a paper ticket where the visitor picks a date, a showtime and the number of seats. Booking tears the stub off and prints the row, seats and a barcode.

↗

Auth · 30View all

Login Card

A centered sign-in card with social buttons, floating-label fields, error alert, loading state and sign-up link.

↗

Auth Tilt Spotlight

A sign-in card that tilts toward the pointer in 3D, with a rotating conic border and a spotlight that follows the cursor across the surface. Includes SSO, email and password with validation, a loading sweep and a drawn success check.

↗

Auth Split Assemble

A split sign-in section whose isometric illustration responds to the form: three floating slabs drop and lock together as the email and password become valid, and a beam lights the stack on success. Captions and progress pips follow each step.

↗

Auth Passkey Handshake

A passkey sign-in built around a dial of sixty ticks: a sweep while the browser looks for a passkey, a draining countdown ring while you confirm on your device, then every tick lights up as the signature is verified. A live checklist shows each step of the ceremony.

↗

Auth Magic Flight

A dark magic link sign-in where the letter folds into an envelope and flies along a dotted route into an inbox tray that catches it and shows a badge. The sent state has a live expiry bar, an Open mail button and a resend cooldown.

↗

Auth Status Rail

A sign-in card with a live status rail beside the form: edge latency with a moving sparkline, workspace detection that switches to SSO for known domains, password policy, device trust and session issuance, each lighting up as you type.

↗

Auth Flow OTP Verify

A one-time code screen built on a single native input under a segmented rail: digits drop into their slots, a glowing bar glides to the next one and the code checks itself when complete. A delivery switch for text, email or call, a depleting resend ring, attempt limits and a verifying sweep complete the flow.

↗

Auth Flow Reset Password

A reset screen that measures strength in bits of entropy on a calibrated track and shows the password's makeup as colored tiles without revealing a character. It warns about reused or common passwords, points to the exact character where the confirmation differs, counts down the reset link and ends by listing the sessions it signed out.

↗

Auth Flow Two-Factor Setup

A three-step authenticator setup: a scannable-looking code grid that ripples in with a scan line and a copyable setup key, a code check beside a ring synced to the 30-second window, and blurred backup codes that must be revealed and confirmed as stored before finishing.

↗

Auth Flow New Device

A new sign-in review with a dotted map that traces an arc from the usual location to the new one, device facts and a number-matching challenge: tap the number shown on the other device to approve it. Blocking the attempt plays a checklist of the lockdown steps taken.

↗

Auth Flow Signup Wizard

A one-question-per-screen sign-up that slides each question in with a blur, advances on Enter and toggles choices with number keys. Beside it a member pass builds itself live from the answers, with a gradient avatar, workspace address, chosen uses and a stamp when the account is created.

↗

Auth Flow Team Invite

An invite acceptance that starts from a ticket with the inviter and member stack, creates the account with the email already verified, then turns into a token field for inviting teammates. Emails become chips with a role switch and an External tag, a seat meter fills as you add people, and sent chips fly into the member stack.

↗

Login Glass Card

A frosted sign-in card floating over a slowly drifting mesh gradient and glassy orbs, with provider buttons, email and password fields, validation and a success state.

↗

Login Passkey

A passkey-first sign-in with a large fingerprint that traces its ridges while a scan line sweeps, a Use passkey button with waiting and success states, and a password form that expands smoothly as a fallback.

↗

Login Social First

A light sign-in page that leads with a grid of provider buttons with generic glyphs and a Last used badge, then an email and password form below a divider.

↗

Login Minimal Line

An ultra-minimal sign-in on warm paper: a large serif greeting whose words rise in, underline fields with floating labels that draw an ink line on focus, and a pill submit button.

↗

Login Forgot Password

A forgot password card with an animated envelope: enter an email, and it opens to show the letter, masks the address and starts a resend countdown.

↗

Login Reset Password

A new password form with a four-segment strength meter, a rules checklist that ticks off as you type, a time-to-crack estimate, confirmation matching and a success state.

↗

Login Two-Factor Choice

A two-step verification screen with method radio cards for authenticator app, text message and security key, a step tracker, and a second step that shows the matching code input or key prompt.

↗

Login Account Chooser

A choose-an-account screen with gradient avatars, workspace badges and signed-in dots, full arrow key navigation, a remembered device chip, a Use another account row and a remove mode.

↗

Login Terminal

A developer sign-in told as a terminal session: prompt lines type in, a one-time device code appears with a copy button, a pulsing waiting line counts down to expiry, plus a token form for headless machines.

↗

Login Onboarding Profile

A first-run profile setup in three steps with a progress bar: gradient avatar picker and name, a role chip, interest chips with a minimum, a live profile preview and a confetti finish.

↗

Auth Split Brand

A full-width sign-in section: a brand panel with a drifting gradient and rotating customer quotes on one side, a complete email and password form with social buttons on the other.

↗

Auth Signup Steps

A three-step sign-up wizard for account, workspace and team invites, with a progress rail, sliding step transitions and validation on every step.

↗

Auth Magic Link

A light passwordless sign-in: an email field that morphs into a Check your inbox state with an envelope that folds shut, a resend countdown and a change email action.

↗

Call to action · 10View all

CTA Banner

A full-width call-to-action band with a soft pulsing radial glow, a headline, one line of text and two pill buttons.

↗

CTA Rotating Band

A full width band over a drifting gradient mesh with grain, a headline whose middle word rotates with a blur slide and an underline timer, and two buttons.

↗

CTA Sticky Dock

A glass dock bar that springs up and sticks to the bottom of a framed page, shrinks while you scroll down, expands on the way up, and can be dismissed and restored.

↗

CTA Magnetic OrbNew

A full-bleed gradient call to action where the color pool follows the pointer and a round button, wrapped in rotating ring text, is pulled toward the cursor and spins faster on hover. A big headline and three proof stats sit beside it.

↗

CTA Live Preview FormNew

A light split call to action: a short signup form on the left and, on the right, a tilted app window that rebuilds itself as you type, with the workspace URL, initials avatar, seat count, price and owner row updating live.

↗

CTA Benefit PlaneNew

A call to action with three columns of benefit cards scrolling in opposite directions on a tilted 3D plane, fading at the edges, beside a headline with a gradient tail and two buttons. Hover pauses the plane.

↗

CTA Terminal InstallNew

An install call to action built around a terminal: package manager tabs, a command that types itself when the section comes into view, an install progress bar and output lines, plus copy and replay buttons.

↗

CTA Gradient Card

A large rounded card with a flowing gradient border, floating shapes, a gradient headline and an inline email form with a success state.

↗

CTA Marquee Band

A full-bleed band where the call to action loops in three huge marquee rows, solid, outlined and dim, behind a pill button that magnetically follows the pointer.

↗

CTA Split Light

A light paper split with a serif headline whose key word gets a hand-drawn underline, bullet promises, a compact signup card and a row of trust logos.

↗

FAQ · 10View all

FAQ Section

Two-column FAQ: heading and contact link on the left, an animated one-at-a-time accordion on the right.

↗

FAQ Chat Thread

FAQ as a conversation: questions become visitor bubbles and the answers type out with a cursor. A numbered question list sits beside the thread, chips replace it on narrow containers.

↗

FAQ Flip Cards

A white grid of question cards that flip in 3D to reveal the answer, with a reveal all toggle, an open counter and a hint wobble on the first card.

↗

FAQ Topic IconsNew

An accordion where every question has a topic icon that draws itself and lights up when opened, with a search field (press slash to focus, arrow keys to move, Enter to open), match highlighting, a result count and topic chips.

↗

FAQ Scroll IndexNew

A long-form FAQ with a sticky left column: a rolling 01 / 04 counter and a topic index with a glowing progress rail that follow the group you are reading, a support card, and grouped answers that reveal as they enter view.

↗

FAQ Branching ChatNew

FAQ as a support widget: tap a suggested question, watch the typing dots, read the answer, and get follow-up questions chosen from that answer so the conversation branches. Each answer has helpful buttons and a hand-off to a person.

↗

FAQ Category DeckNew

A light FAQ with topic cards in a vertical tab list (icon, count and description) and a panel that wipes in from the top when you switch, with numbered questions rising into place. Arrow keys move between topics.

↗

FAQ Search

A search field that filters questions as you type and highlights every match, popular keyword chips, a smooth accordion and a friendly empty state with a contact button.

↗

FAQ Two Column

A light FAQ with a sticky left column holding the title and a support card with online status, and numbered questions on the right that open with a smooth height animation.

↗

FAQ Categories

Category tabs with a sliding pill switch between sets of question cards, which slide and fade in from the direction you moved. Arrow keys move between tabs.

↗

Pricing · 17View all

Pricing Section

Three pricing tiers with a sliding monthly/yearly toggle, crossfading prices, feature checklists and a highlighted most-popular plan.

↗

Pricing Seats Slider

Per seat pricing on paper: a team size slider with a filling crowd of dots, volume bands, and three plans whose totals roll digit by digit with a per seat breakdown.

↗

Pricing Feature Table

A dark comparison table with a sticky blurred header of plans and prices, collapsible feature groups, a monthly or yearly switch that flips the prices, and plan tabs on narrow containers.

↗

Pricing Toggle Burst

Three plans with a spring-loaded monthly and yearly switch. Going yearly fires a burst of shards from the discount badge, strikes through the old price and slides in the yearly saving on every card.

↗

Pricing Usage Calculator

Four metered sliders with free allowances hatched on the track feed a live receipt with a stacked cost bar. It also points to the cheapest flat plan that covers the usage and shows the monthly saving.

↗

Pricing Spotlight Grid

A single light follows the pointer across three plan cards, lighting their borders, inner surface and a dotted field in the gaps between them. When the pointer leaves, the light settles on a resting point.

↗

Pricing Matrix Sticky

A full feature matrix in its own scroller whose plan header sticks and compacts as you scroll. Columns light up under the pointer and an Only show differences switch folds away rows every plan shares.

↗

Pricing Tier Carousel

Five plans in a 3D cover flow you can swipe, drag, click or drive with arrow keys. A price rail below places every tier on a log scale and a ring glides to the active one while the backdrop takes its color.

↗

Pricing Ribbon Highlight

One spinning gradient frame glides between plan cards as you hover or tab, then springs back to the selected plan. The best value plan wears a corner ribbon with a passing shine and the cards work as a radio group.

↗

Pricing Enterprise Contact

An enterprise card with value points, compliance seals and customers beside a scoping form. Team size and add-ons update a ballpark annual contract live, and booking a call slot ends in a drawn confirmation.

↗

Pricing Credit Stack

Credit packs as a radio list next to a stack of coins that grows and drops new coins in as you pick a bigger pack, with bonus credits glowing on top. Below, live counts show what the credits buy.

↗

Pricing Seat Stepper

A press-and-hold seat stepper that fills a row of teammate avatars while a dot climbs down a volume staircase chart. Price per seat, savings and the next price break update live, with a jump to the break.

↗

Pricing Single Plan

A minimal one-plan page with an oversized price, a slowly turning guarantee seal and a shining call to action. Every included feature ticks itself on in sequence when the section scrolls into view.

↗

Pricing Switch

Three tiers in one joined panel with a sliding monthly and yearly switch. Prices roll like an odometer when the period changes and the featured tier glows with a rotating border.

↗

Pricing Slider

Usage-based pricing driven by a keyboard-friendly range slider. The estimate, graduated tier breakdown and cost bar update live, with tier thresholds marked on the track.

↗

Pricing Compare Cards

A light paper layout with two large plan cards whose feature rows tick, dash or show a value side by side, and a dark enterprise strip underneath.

↗

Pricing Credits

Credit pack pricing with four selectable cards that tilt toward the pointer, a best value ribbon, per-credit prices and savings, a purchase bar and a three-line FAQ strip.

↗

Stats · 11View all

Stats Mosaic

A by the numbers bento: counting figures in tiles that each carry a different animated mini visual, from a drawing area chart and uptime bars to a dot field, gauge, avatar marquee and star fill.

↗

Stats Before After

A light case study block that plays numbers from before to after, with a draggable timeline, Before and After buttons, delta pills whose arrows flip, comparison bars and a customer quote.

↗

Stats OdometerNew

A light instrument panel of mechanical counters. When the section scrolls into view each digit drum spins into place, the ones place turning longest, inside shaded wheels like a real odometer.

↗

Stats Scrub BandNew

A band of four metrics with sparklines that share one crosshair. Hovering or pressing the arrow keys scrubs every metric to the same day at once, and a range switch redraws all lines for 7, 30 or 90 days.

↗

Stats Arc GridNew

An asymmetric grid of big numbers, each with a segmented gauge rising from the tile corner and a large half dial on the feature tile. Segments light up toward each goal while the figures count, and glow on hover.

↗

Stats VersusNew

A light before and after comparison drawn as mirrored bars that grow out from a center axis, the old way on one side and the new on the other. A team size switch re-flows every bar, and each row carries a multiplier chip.

↗

Stats MilestonesNew

A company timeline where a playhead sweeps across a cumulative growth curve and wakes each milestone as it passes, rolling its count up. Cards sit in an even row joined to their points on the curve, with a replay button.

↗

Stats Counters

Four oversized numbers that count up when the row scrolls into view, separated by hairlines, each with a label, a sparkline that draws itself and a small change note.

↗

Stats Bar Race

A headline and summary figure beside a ranked bar chart. On view the bars race out to their values, larger ones running longer, while the numbers count up in step.

↗

Stats Radial

A light section with three radial progress rings that sweep in on view, with tick marks that light up behind the arc, counting center numbers and a short description under each.

↗

Stats Ticker

A dark full-bleed band with one oversized featured figure on top and two rows of metrics scrolling in opposite directions underneath, each with a value and a colored change arrow.

↗

404 pages · 8View all

404 Maze

A dark 404 section where a tiny pixel explorer wanders a grid maze looking for the exit. Point anywhere on the grid, or use the arrow keys, and it finds a path toward you.

↗

404 Apology Letter

A light 404 page written as a typed letter on airmail paper. The apology types itself out, then a red 404 return to sender stamp thumps onto the sheet.

↗

404 OrbitNew

A 404 page where the zero is a ringed planet and the two fours orbit it in 3D, passing behind and in front. A mission HUD with a radar shows the lost path, over a parallax starfield with a passing comet.

↗

404 Terminal ShellNew

A light 404 page with a cracked retro monitor that prints a crash log, then leaves a working shell. Visitors can type help, ls, cd and home with history and tab completion, or use quick command buttons.

↗

404 Glitch

A split 404 page with a giant code torn by chromatic glitch slices, a scanline sweep and a terminal log that types out the failed request.

↗

404 Broken Plug

A 404 page with a flickering neon code and an unplugged cable whose plug and socket throw sparks. The retry button plugs it back in with a short reconnect animation.

↗

Profile · 8View all

Profile Settings Card

A light settings page with a section nav and a profile card: avatar color swatches tint the cover, fields validate inline, edited fields get a dot, and a footer tracks unsaved changes with reset, saving and saved states.

↗

Profile Team Presence

A grid of teammate cards with presence dots that pulse when online, status notes, a typing indicator, local times and message and call actions, filtered by a status switch and a search field.

↗

Profile Resume Timeline

A resume profile with a sticky card holding the person, availability, summary and animated skill bars, beside an experience timeline whose line draws down and whose current role pulses, plus education.

↗

Profile Dev SkylineNew

A developer profile whose contributions rise as an isometric skyline, one tower per day, with hover and arrow-key inspection of each day. Beside it sit streak counters, a language bar and pinned repositories.

↗

Profile Header Card

A social profile header with a drifting gradient cover, overlapping avatar, follow and message actions, stats that count up and tabs with a sliding underline.

↗

Profile Dev Card

A developer profile with avatar, role, location, stack chips, a year of contributions as an animated heatmap with hover tooltips, and pinned project cards with stars and forks.

↗

About · 9View all

About Team Filter

A team grid with filter chips per team. Hovering or focusing a card lifts the avatar and slides up a bio panel with location, and cards stagger back in whenever the filter changes.

↗

About Timeline Scroll

A light, horizontal company timeline with snap scrolling. A year rail above fills as you scroll, the active year lights up, and arrow buttons, year markers and the keyboard all move between milestones.

↗

About Mission Split

A huge mission statement on the left that reveals word by word with highlighted words, and three numbered principle cards on the right whose metrics count up when they scroll into view.

↗

About Press Wall

A white press section with two marquee rows of typographic wordmark chips moving in opposite directions, a rotating serif press quote with progress dots, a row of award cards with laurels and a press kit link.

↗

About Growth TimelineNew

A company story told as milestones that reveal while scrolling, beside a sticky panel whose headcount chart draws up to the active year and whose number counts to match. Chart points and cards can also be clicked.

↗

About Values MotifsNew

A light values grid where each tile has an outlined number and a small drawn motif that plays its own animation on hover or focus, from a door swinging open to a sprout growing. A pointer spotlight follows inside the tile.

↗

About Team TimezonesNew

A distributed team section with a daylight band across time zones where every person sits at their UTC offset, linked to a card grid with live local times. Team filters and search dim the people who do not match in both views.

↗

About Story

A company story with a large serif statement, a row of key facts, a five-step timeline whose line draws down as it enters view, and a founder note card.

↗

About Values

A light values section with six numbered cards, a softly bobbing row of team avatars with a head count, and a strip of open roles as pill links.

↗

Waitlist · 8View all

Waitlist Inline Pill

A minimal dark waitlist with one inline email field over a breathing halo. Invalid input shakes the field, the button shows a spinner while saving, and the form morphs into a success pill with a drawn check.

↗

Waitlist Referral Board

A referral waitlist with a name and email form, reward tiers and a live leaderboard of top referrers with animated bars. After joining, your spot counts up, a referral link appears with a copy button and you join the board.

↗

Waitlist Teaser Unlock

A light split waitlist with a blurred product preview behind a lock badge and a scanning shimmer. Joining with email and team size sharpens the preview into focus and swaps the form for a confirmation.

↗

Waitlist Capacity Countdown

A dark launch panel with a rolling four-unit countdown, a striped capacity bar that fills toward the seat limit, a spots-left counter that ticks as people join and an email form that reserves a numbered seat.

↗

Waitlist Queue TicketNew

A light waitlist with an odometer of people in line and a ticket machine where a queue marches toward the gate. Joining drops you into the line and prints a perforated ticket with your number, wave and opening date.

↗

Waitlist Referral LadderNew

A referral waitlist where rewards are rungs on a vertical ladder and a marker climbs the rail as friends join. After signing up you get your place, a copyable link and an email chip field to send invites.

↗

Waitlist: Live Counter

A light, centered waitlist with an email field, a rolling counter that ticks up live and on signup, an avatar stack and a road-to-launch bar. After signup it shows the spot number and a referral link to copy.

↗

Waitlist: Launch Card

A dark glass card over drifting color with a four-tile flip countdown to a launch date, an email form and a perks column.

↗

Showcase · 9View all

Showcase Before After

A light redesign showcase: a browser frame holds the old and new screen, split by a draggable divider that also works with arrow keys. It sweeps once on load to hint that it moves, with result stats underneath.

↗

Showcase Device Tabs

A feature carousel with a list of tabs beside a large laptop. Each tab swaps the screen with a staggered build, and a progress line advances the tour on its own, pausing on hover or focus.

↗

Showcase Device GalleryNew

One device frame that morphs between watch, phone, tablet and laptop, while the app inside reflows to a layout built for each screen. A segmented picker with a timer tours the devices on its own.

↗

Showcase Browser

A product showcase with copy on the left and a browser frame on a gradient stage whose page scrolls slowly, with floating callouts pointing at what matters.

↗

Showcase Device Stack

A laptop, tablet and phone stacked in depth that tilt with parallax as the pointer moves, above a four-column feature caption row.

↗

How it works · 9View all

Stepper With Screens

A how it works section with a vertical stepper beside a mock app window. Each step swaps the screen with a blur and slide, and the steps advance on their own with a progress bar.

↗

Dashed Path Steps

Four numbered cards on paper, joined by a marching dashed route. A dot travels the path and each card lights up as the dot reaches it; on narrow screens the route turns vertical.

↗

Steps CircuitNew

Steps drawn as chips on a dotted board, joined by rounded circuit traces that fill up to the current step while a signal pulse travels the route. Below, a panel explains the step with a typed terminal log.

↗

Steps Story TabsNew

A light process section with story-style progress bars as tabs. Each chapter brings its own animated illustration: a floor plan drawing itself, palettes fanning out, an isometric room rising, a cart filling.

↗

Steps Scroll RulerNew

A vertical plan along a measuring ruler whose ticks light up as you scroll, next to a sticky meter where the percentage rolls like an odometer. Cards brighten as the playhead reaches them.

↗

How It Works: Steps Line

Four numbered step cards joined by a line that fills from start to end when the section scrolls into view. Each card carries a small looping illustration.

↗

How It Works: Sticky Scroll

Step descriptions on the left and a sticky product mockup on the right that switches screens as each step reaches the middle of the viewport. Steps are also clickable.

↗

How It Works: Vertical Timeline

A light, editorial timeline with serif titles and cards that alternate sides. The line fills and the current dot pulses as you scroll; on narrow screens every card sits on the right.

↗

How It Works: Flow Diagram

Four connected nodes for input, process, review and output, with packets traveling along the paths, a skip route and a loop back. Hovering or focusing a node shows its details below.

↗

Download · 8View all

Download Changelog

A release section with the latest version card, highlights and download buttons per platform, next to a changelog timeline that draws in, with collapsible releases, typed notes and filters for new, improved and fixed.

↗

Download Requirements

A light system requirements block with macOS, Windows and Linux tabs on a sliding pill. Each tab shows a minimum versus recommended table with meters, plus the installer, its checksum with copy, and other formats.

↗

Download QR Handoff

A continue on your phone card with a QR pattern built from the link, a scan line sweeping over it and a countdown that refreshes the code. A text me a link form and a phone preview of the session sit alongside.

↗

Download OS HubNew

A download section that detects the visitor's operating system and offers the matching installer with a build picker. The button fills while the download starts and then shows the install steps; other platforms sit below.

↗

Download Version TableNew

A light release table with a channel switch for stable, beta and LTS. Opening a row slides in a changelog drawer over the table with added, improved and fixed groups, newer and older navigation, and a download button.

↗

Download: Platforms

Desktop download cards for macOS, Windows and Linux. The card matching the platform prop gets a rotating beam border and the primary button, and every card has a checksum you can copy.

↗

Download: App Badges

A mobile app promo with a phone mockup, floating cards that drift, generic store badges, a scannable-looking QR pattern and a rating line.

↗

Download: Install Tabs

A light developer install block with tabs for npm, pnpm, yarn and brew. The command types itself out on every switch and each box has a copy button with a copied state.

↗

Blog · 8View all

Blog List Editorial

A light, paper toned list of essays with a date column, serif titles, excerpts and a sticky category filter that fades the list in on change.

↗

Blog Article Header

The top of a single article: breadcrumb, large title that blurs in word by word, author block, share buttons, a reading progress bar and an opening paragraph with a drop cap.

↗

Ecommerce · 9View all

Product Reviews

A light product reviews section with an average score, a clickable rating histogram, a recommend ring, filter chips and review cards with verified badges and helpful votes.

↗

Order Tracking

An order status section with a stylized city map where a courier van drives the route to a pulsing pin, an ETA card, a delivery timeline and the items in the parcel.

↗

Shop Spin ConfiguratorNew

A product detail where the bottle turns a full 360 degrees as you drag it, with view presets that rotate to front, side or back. Finish, size and a live laser engraving restyle the product as you type.

↗

Shop Product Detail

A product page section with a switchable gallery and hover zoom, rating, price with savings, color swatches, size chips, a quantity stepper and an add to bag button that morphs into a confirmation.

↗

Shop Cart Summary

A cart panel with line items, quantity steppers and remove, a free shipping progress bar, a promo code field with valid and invalid states and totals that count to their new value.

↗

Shop Collection Hero

A light collection page opener: a warm banner with a serif title and floating product art, filter chips and a row of four products with wishlist hearts and a quick add overlay.

↗

Shop Checkout Steps

A three step checkout with an animated step header, a shipping form, delivery method cards with prices, payment options, a review screen and a live order summary.

↗

Checkout & billing · 10View all

Checkout One Page

Contact, shipping, delivery and payment on a single page beside a sticky order summary. Card numbers format as you type and pass a Luhn check, a progress rail fills as each part becomes valid, and a success state replaces the form.

↗

Checkout Split Summary

A dark two-column checkout with a brand panel on the left holding the order, a promotion code field and trust badges, and a card form on the right. The total counts to its new value when a code is applied.

↗

Checkout Stepper Card

One centered card that walks through Details, Payment and Confirm with a glowing progress track. Steps slide in from the direction you travel, each step validates before moving on, and the review step links back to edit.

↗

Checkout Mobile Sheet

A phone mockup with a product page and a wallet-style payment sheet that rises from the bottom. Payment is confirmed by dragging a slider, or with the arrow keys and Enter, followed by a success state inside the sheet.

↗

Checkout Subscription Upgrade

A light plan upgrade screen comparing the current plan with the new one. A seat slider drives a proration breakdown whose figures count to their new values, next to the card on file and a confirm button.

↗

Checkout Success Receipt

An order confirmation with a self-drawing success mark, a paper receipt that prints out of a slot with perforated edges and a barcode, and a delivery timeline. Download receipt saves a text file locally unless you handle it.

↗

Checkout Payment Failed

A declined payment screen that explains the reason and offers three ways forward: retry the same card, enter another card, or pay by bank transfer with copyable sample details. A support card sits alongside with the order reference.

↗

Checkout Billing Settings

A light billing settings page with the current plan, saved payment methods that can be made default or removed after an inline confirm, billing email and tax ID fields with format checks, usage meters and the next invoice.

↗

Checkout Invoice History

Invoice history with counting totals, an upcoming invoice card, status filters, search and a year select over a table with status pills and download buttons. The table turns into stacked rows in narrow containers and exports to CSV locally.

↗

Checkout Pricing Modal

Plan cards inside a dialog over a dimmed app, with a monthly and yearly switch, prices that roll on change and a summary bar with Continue. Focus is trapped while open, Escape and the backdrop close it, and focus returns to the Upgrade button.

↗

Local business · 8View all

Local Booking Card

A clinic hero with an appointment card beside it: pick a service, a date chip and a time slot, then confirm to see a booking ticket.

↗

Local Menu Board

A restaurant menu with tabs for each course, dotted price leaders and a featured dish card with an illustrated plate.

↗

Local Hours and Map

Opening hours with today highlighted and an Open now badge, next to an illustrated street map with a dropping pin and a Get directions button.

↗

Local Team Grid

Practitioner cards with illustrated portraits, years of experience, specialty chips and a booking link that lift on hover.

↗

Local Services Price List

Services in columns with duration and price, a shimmering popular marker and a bold package offer underneath.

↗

Local Reservation Bar

A wide reservation bar with date, time and a guest stepper over a warm sunset street scene, with live availability dots around the chosen time.

↗

Local Before and After

A draggable, keyboard accessible before and after slider with two illustrated kitchen scenes, caption chips and a strip of project results.

↗

Local Reviews Wall

A rating summary with a star distribution beside two columns of review cards that drift slowly in opposite directions and pause on hover.

↗