Scalar UI
Marketing UIApp UIAIChartsBackgrounds
Sign inGet started
Scalar UI
Scalar UI© 2026 Scalar Limited

React · Tailwind CSS · Motion

Browse

HomeAll components 213

Collections

Marketing UI 107App UI 94AI 16Charts 45Backgrounds 2Text 43

More

Text 43

Marketing UI

Visuals 53Bento 1Hero 6Features 7Pricing 6Social Proof 16CTA & FAQ 9Headers & Footers 3Mockups 2Kit 3Landing pages 1

App UI

InstallationPrimitives 60Layouts 3Blocks 30Other 1

AI

Chat boxes 2Skill slots 1Power-ups 1Spark sliders 1Attachments 1Spark pulsars 1Typing & avatars 2Agent UI 1Personas 6

Charts

Bar chart 2Stacked bar 2Horizontal bar 2Line chart 3Area chart 3Spark chart 1Pie chart 2Donut & semi-donut 2Radial chart 1Hexagon chart 3Heatmap 2Funnel chart 3Category bar 2Segmented progress 1Scatter & bubble 2Combo chart 2Waterfall 2Diverging bar 2Candlestick 2Treemap 2Waffle chart 2Sankey 2

Resources

Docs & installScalar Design

All components

Marketing sections, AI pieces, charts, interactives, backgrounds and text effects. Preview live, copy when you’re signed in.

213 results

213 results

Spotlight preview

Spotlight

Text effect

Text waits in the dark until a soft, grainy cone of light passes over it — or reveals a hidden line in x-ray mode.

Lens Focus preview

Lens Focus

Text effect

A viewfinder glides from word to word — corner brackets frame the focus while the rest of the sentence softly blurs.

Split-Flap preview

Split-Flap

Text effect

A departure board — each cell flips through a few characters on hinged flaps before landing, in a left-to-right wave.

Melt Swap preview

Melt Swap

Text effect

One word melts into the next through a liquid goo filter, with a faint onion-skin ghost of the last word.

Echo preview

Echo

Text effect

Ghost copies converge into the word as it arrives and fan out on hover — or stack as an outlined type poster.

Pathline preview

Pathline

Text effect

Display text rides a curve that pulls taut as you scroll, like a rope being drawn straight.

Swarm preview

Swarm

Text effect

A word made of particles that part around your pointer and spring home — or drift away as dust and gather back on command.

Lens Warp preview

Lens Warp

Text effect

A glass lens follows the pointer — letters inside are crisply magnified, with a faint colour fringe at the rim.

Underline Studio preview

Underline Studio

Text effect

Direction-aware link underlines — they draw in from the side you enter and leave toward the side you exit.

Sticker preview

Sticker

Text effect

A die-cut sticker headline that lifts on hover while its corner peels back to show the shaded underside.

Shimmer preview

Shimmer

Text effect

A single glossy glint crosses the text every few seconds; hover and the light follows your pointer.

Orbit Ring preview

Orbit Ring

Text effect

A circular text badge whose letters swell in weight as they pass the top; spins with scroll velocity.

Glide Marquee preview

Glide Marquee

Text effect

Infinite text rows with faded edges that bend like a ribbon with scroll speed and slow to a crawl on hover.

Typewriter Pro preview

Typewriter Pro

Text effect

Typing that feels human — uneven cadence, typos that get corrected, fast deletes and a caret that blinks only when idle.

Aura Gradient preview

Aura Gradient

Text effect

A grainy oklch mesh gradient inside the letters that leans toward your pointer — or fill the type with an image.

Odometer preview

Odometer

Text effect

Numbers on rolling wheels with speed-scaled motion blur; separators and units stay perfectly still.

Pressure preview

Pressure

Text effect

Letters swell, widen and open up under the pointer, then settle back with a jelly bounce.

Iris preview

Iris

Text effect

Each letter opens through its own circular aperture, rippling outward from wherever your pointer enters.

Receipt preview

Receipt

Text effect

Content prints out of a thermal printer as you scroll — paper curl, dashed rules and a torn edge.

Perimeter preview

Perimeter

Text effect

A line of text runs continuously around a card's border — faster on hover, brightest near your pointer.

Dither Type preview

Dither Type

Text effect

Type that develops out of 1-bit grain like a darkroom print — plus ASCII and LED dot-matrix modes.

Skeleton Morph preview

Skeleton Morph

Text effect

A loading state that becomes its content: shimmering bars snap to each word's width, then the words fade in.

Slice preview

Slice

Text effect

A headline reassembles from strips sliding in from alternating sides, each arriving in a tint that merges into the text colour.

Gather preview

Gather

Text effect

Letters assemble from a scatter, a burst or a ring — scrubbed by scroll or played once in view.

Prism Foil preview

Prism Foil

Text effect

Holographic foil type whose iridescence and sheen shift with the pointer angle — or device tilt on phones.

Paper Fold preview

Paper Fold

Text effect

Lines unfold like a concertina of paper, hinging up and down with shading that lifts as they flatten.

Redact preview

Redact

Text effect

Declassify a sentence: bracketed phrases sit under grainy ink bars that peel away one by one.

Dev Stage preview

Dev Stage

Text effect

A terminal that performs a script — commands type with a caret, output streams, diffs strike and retype.

Inkwell preview

Inkwell

Text effect

A pen traces each letter's outline, then ink soaks up through the word with a ragged, absorbent edge.

Anagram preview

Anagram

Text effect

A display word that rearranges itself — shared letters travel to new seats and catch the accent mid-flight.

Word Swap preview

Word Swap

Text effect

An inline word that cycles through a list; shared letters glide into place and the sentence reflows smoothly.

Focus Pull preview

Focus Pull

Text effect

Text comes into focus like a camera lens — blur, scale and a faint colour fringe converge word by word.

Rise preview

Rise

Text effect

Lines rise out of a hairline rule with a soft overshoot; presets for flip, shear and curtain.

Pixel Resolve preview

Pixel Resolve

Text effect

Type steps from chunky, ordered-dithered pixels to crisp text — or dissolves back into pixels.

Weave preview

Weave

Text effect

Text ripples like fabric in a breeze — silk, linen or water — with CSS-only motion that pauses offscreen.

Highlighter preview

Highlighter

Text effect

Annotate phrases as they appear: a marker sweep that wraps lines, or hand-drawn underline, circle, box and strike.

Rolling Label preview

Rolling Label

Text effect

Button and link labels roll letter by letter on hover — in the direction the pointer entered.

Scroll Ink preview

Scroll Ink

Text effect

A paragraph inks in word by word as you scroll, with a soft glow at the reading point.

Decode preview

Decode

Text effect

Text resolves left to right out of its own shifting letters — hover any word to decode it again.

Drum preview

Drum

Text effect

Words printed around a 3D cylinder that turns to the next one, with depth fog — by timer or by scroll.

Blur Reveal Text preview

Blur Reveal Text

Text effect

Words resolve from blur, one after another, as they enter the viewport.

Aurora Background preview

Aurora Background

Background

Drifting, blurred colour fields with film grain.

Sparkle Line Chart preview

Sparkle Line Chart

Chart

Smooth lines that draw in from the left, with a crosshair tooltip across every series — an electrified dot grid with twinkling four-point sparks.

Sparkle Area Chart preview

Sparkle Area Chart

Chart

Filled trends that sweep in from the left, overlapping or stacked, with a crosshair tooltip — an electrified dot grid with twinkling four-point sparks.

Sparkle Hexagon Chart preview

Sparkle Hexagon Chart

Chart

A radar chart on a hexagonal grid; each series grows out of the centre — an electrified dot grid with twinkling four-point sparks.

Sparkle Heatmap preview

Sparkle Heatmap

Chart

A grid shaded by value that cascades in diagonally, with a row-and-column crosshair on hover — an electrified dot grid with twinkling four-point sparks.

Sparkle Funnel Chart preview

Sparkle Funnel Chart

Chart

One band that narrows stage by stage, with counts, shares and step-conversion pills — an electrified dot grid with twinkling four-point sparks.

AI Chat Panel preview

AI Chat Panel

AI

A compact chat window where sent messages lift out of the box and answers stream in word by word

AI Composer preview

AI Composer

AI

A chat box whose placeholder flips between suggestions, with tools, a model picker and a send button that becomes stop

Skill Deck preview

Skill Deck

AI

Attached skills drop in from above and ride as a deck tucked behind the composer, fanning out on hover

Skill Power-Up preview

Skill Power-Up

AI

A skill card slots into the composer and the dot grid around it powers up, rim first, and keeps crackling

Attachment Tray preview

Attachment Tray

AI

A composer that takes images and files from a springy + menu or a drop, with upload rings and a tidy tray

Spark Pulsar preview

Spark Pulsar

AI

An Ask AI pill that blooms into a composer while sonar rings pulse out through the dot grid around it

Thinking Trail preview

Thinking Trail

AI

A spiral loader, shimmering headline and live timer over steps that tick off, folding into “Thought for 6s”

Number Ticker preview

Number Ticker

Text effect

Counts up with an expo ease when scrolled into view.

Typewriter Text preview

Typewriter Text

Text effect

Types, pauses and deletes through a list of words with a blinking caret.

Dot Grid Background preview

Dot Grid Background

Background

A precise dot matrix that lights up around the cursor.

Agent Passport preview

Agent Passport

Section

A passport for an AI agent with real document security. A portrait booklet opens to a laminated data page with the agent's holographic emblem, a ghost image and a seal, visas are inked opposite, and a UV lamp reveals hidden fluorescent fibres and the registry emblem.

Agent Pass preview

Agent Pass

Section

An access pass for an AI agent and the reader it slots into. A holographic credential with a guilloché rosette, a diffractive emblem and three clearance rings drops into the reader like a cassette, light races round its rings, access is granted and it ejects.

Ticket Tear preview

Ticket Tear

Section

A boarding pass that tears. A porcelain ticket with a lit header band, a route and a perforated stub with notches cut right through. The barcode is scanned, the stub rips away along a jagged edge and the header flips to boarded. Click to tear it.

Iso Stack preview

Iso Stack

Section

Plates stacked in isometric view, one per layer of your product, drawn in SVG with no 3D library. The stack opens, lights each layer in turn and closes again. Hover a plate to hold it. Labels hide on their own in narrow tiles.

Integration Hub preview

Integration Hub

Section

Your mark in the middle with the apps it connects to on either side. One event at a time travels in from an app, the hub counts it and sends it out to another, which ticks. Bring your own icons and names.

Command Loop preview

Command Loop

Section

A command menu that drives itself. A query types out, results narrow with the match in bold, the highlight steps down, Enter runs it and the list gives way to what happened. Pass your own commands and scripts.

Dotted Globe preview

Dotted Globe

Section

A point-cloud globe on a plain canvas with no 3D library. Land is drawn as dots, it spins slowly, arcs fly between cities one after another and you can drag it to spin. Centred, or rising from the bottom edge.

Rolling KPI preview

Rolling KPI

Section

A headline number that rolls digit by digit as new values arrive, with the change since the start and a sparkline that eases to each point. Bring your own series, format and which direction counts as good.

Uptime Bars preview

Uptime Bars

Section

Daily status bars for a few services. They rise in on view, then a scrubber visits each incident and every row says what happened that day. Point at a bar to scrub it yourself. Bars thin out to fit narrow tiles.

Dither Field preview

Dither Field

Section

A 1-bit canvas for any tile: an ordered 8×8 Bayer dither of a lit orb, drifting hills or slow noise, in one ink colour on a transparent ground. Set the cell size, the ink and an optional paper colour.

Compare Slider preview

Compare Slider

Section

Two states of the same thing with a divider between them. Drag, click or use the arrow keys. It sweeps now and then to show it moves, and stops once someone touches it. Pass two nodes, or one photo and a filter.

Deploy Pipeline preview

Deploy Pipeline

Section

A release moving through its steps. Each goes queued, running and done while its logs stream underneath and a line fills between them. Then the address lights up and it starts over. Turns vertical in narrow tiles.

Live Cursors preview

Live Cursors

Section

A shared canvas with three named cursors. One drags a card across and back, one draws a selection round a group and one leaves a comment that types itself out. It all runs off one clock, so it pauses cleanly.

Chat Thread preview

Chat Thread

Section

A team thread that plays itself: typing dots, messages that pop in on a spring, a reply typed into the composer and sent, and a reaction that bounces onto the last bubble. Bring your own people and lines.

Kanban Shuffle preview

Kanban Shuffle

Section

A board that works through itself. A card lifts, flies to the next column while its neighbours make room, and lands with a check in the last one. Counts roll as cards move. Any number of columns.

Toast Stack preview

Toast Stack

Section

Notifications that pile up like a deck: each new one springs in at the front while older ones step back. Hover to fan the stack out, swipe the front one away, and watch the unread count roll.

Bar Race preview

Bar Race

Section

A live leaderboard whose rows re-sort on a spring as values change. Numbers roll digit by digit, the leader takes the accent, and a row that climbs shows how many places it gained.

Radial Gauge preview

Radial Gauge

Section

A dial with a ring of ticks that light up to the value and a hand that swings there on a spring, overshooting before it settles. The number rides the same spring and a status chip changes by band. Drag to set it.

Envelope preview

Envelope

Section

A message that sends itself. The letter slides into a soft porcelain envelope, the flap folds shut on a spring, a seal stamps on and it flies off, leaving a confirmation behind. Then a fresh one opens.

Edge Cloud preview

Edge Cloud

Section

A cloud lit from inside, rendered on the GPU. Three wires run into it from each side; every few seconds streaks of light race down all six at once, and when they land the cloud flares as rings of light roll through it from each side. Click to send a wave.

Pricing Slider preview

Pricing Slider

Section

A seat slider whose thumb rides a spring. The total rolls digit by digit, the plan badge changes at each tier and the features it unlocks tick on. It glides through a few seat counts until someone drags.

Theme Flip preview

Theme Flip

Section

A small app that flips between light and dark. The new theme spreads out from the switch in a circle and pulls back into it on the way home while the knob springs across. Click the switch to flip it.

File Drop preview

File Drop

Section

Files fall into a dropzone with a bounce, the zone gives under them, and each one morphs into a row where a ring fills and turns into a check. Bring your own file names, sizes and types.

Sankey Flow preview

Sankey Flow

Section

Where things go, as bands whose widths are the volume. Particles stream along every band, and the path through one node lights up while the rest steps back. It tours each source, or follows your pointer.

Bar City preview

Bar City

Section

An isometric city of bars, one block per value. Blocks spring up in a wave on view, then new data rolls in and every block springs to its new height. Point at a block to read it.

Topographic Lines preview

Topographic Lines

Section

A contour map that drifts like weather. A hill follows the pointer and the lines bend around it, taking the accent near its peak. With nobody pointing, the hill wanders by itself.

Terminal Run preview

Terminal Run

Section

A terminal that runs commands by itself: the command types out, logs stream in under a spinner, progress bars fill, and each run ends on a success pill before the next one starts.

Calendar Drop preview

Calendar Drop

Section

A week that schedules itself. An event lifts out of the tray, glides over the grid while a slot outline snaps along under it, and drops in. Whatever it lands on slides over to share the hour.

Encryption Scramble preview

Encryption Scramble

Section

Personal data that encrypts and decrypts in place. Every character shuffles through cipher glyphs in a wave while a lock snaps shut. Hover to peek at the plain text, or click to flip it.

Service Graph preview

Service Graph

Section

A live service map laid out by a small physics simulation. Requests travel the edges as pulses and the map breathes. Grab any node and fling it, and everything connected follows on springs.

Contribution Heatmap preview

Contribution Heatmap

Section

A year of activity as a grid of days. Weeks pop in from left to right on view, today keeps ticking up and the total rolls. Point at any day to read it; left alone it visits the busiest days.

Permission Toggles preview

Permission Toggles

Section

A member's access set by role. Each role change flips the switches in a cascade, the role badge morphs and a saved note slides up. Flip any switch yourself and the role becomes Custom.

Donut Breakdown preview

Donut Breakdown

Section

A donut that draws itself slice by slice on view. The picked slice slides out of the ring and the centre rolls to its value and share. It walks the slices on its own until you point at one.

Live Line preview

Live Line

Section

A live metric whose line scrolls left as new points arrive. A now dot rides the newest value, the reading rolls digit by digit, the scale eases to fit, and pointing at the line reads earlier points.

Load Balancer preview

Load Balancer

Section

Traffic through a load balancer, rendered on the GPU. Requests race in along curved wires and land in a glass balancer lit from inside, which flares and hands each on to a server card with a live sparkline. A failing server's route dims red and the rest pick up the load.

Pixel Lock preview

Pixel Lock

Section

A padlock built on a pixel grid. Its cells flicker into place, the shackle drops shut with a bounce and a wave of light bursts out across the grid, and a scan line sweeps the body. Then it opens, dissolves and builds again. Hover to open it.

ASCII Torus preview

ASCII Torus

Section

A spinning torus drawn in text, lit and shaded into characters every frame with the brightest in the accent. The pointer tilts it and speeds the spin.

Terrain Flyover preview

Terrain Flyover

Section

A flight over ridgelines drawn as stacked lines that hide what's behind them. The land scrolls toward you under a low sun, and the pointer steers the camera.

Form Autofill preview

Form Autofill

Section

A form that fills itself in. Each field types out, an email check spins, a tick bounces onto every valid field, an option gets picked and the button squeezes into a saved pill.

Compute Chip preview

Compute Chip

Section

A processor on a circuit board. Traces fan out from its pins, light pulses race along them into the package, and the die brightens with every one that lands. The chip tilts toward the pointer and the die's highlight follows it.

Webhook Timeline preview

Webhook Timeline

Section

Webhook deliveries on a moving timeline. Each event drops onto the track and joins the log. When one fails, an arc loops it back to the present and the retry lands green.

Org Tree preview

Org Tree

Section

A team that grows in front of you: the tree opens a level at a time as its lines draw in, then a new hire joins and teammates shuffle over. Point at anyone to trace them to the top.

Funnel Flow preview

Funnel Flow

Section

A conversion funnel as lit glass bars, one per stage, joined by soft ribbons that taper as people drop away. Streaks of light run through it, and at every step some fade out where they leave, in the share that stage loses. Point at a stage to pick it out.

Latency Histogram preview

Latency Histogram

Section

How long requests take, as a histogram. Bars spring to each new shape as conditions change, p50, p95 and p99 markers slide into place, and the slow tail turns amber. Point at a bar to read it.

Diff Loop preview

Diff Loop

Section

A pull request that reviews itself. Removed lines turn red one by one, new lines slide open in green while the counts tick up, and the change ends approved. Then it rewinds and plays again.

Mesh Gradient preview

Mesh Gradient

Section

A soft mesh of colour drawn on the GPU. Three pools drift and melt into each other under fine grain, and a fourth follows your pointer through them. Works behind text or on its own.

Payment Card preview

Payment Card

Section

A payment card with a holographic finish, rendered on the GPU. A thin-film foil on a pearl surface shifts colour as the card turns: it sways on its own, tilts toward the pointer with a glare that follows, and flips over to its back when clicked.

Product Tour preview

Product Tour

Section

A guided tour of an app screen. The camera glides and zooms from one area to the next, a ring settles around it with a caption and the rest dims. Click a dot to jump to a step.

Expand Grid preview

Expand Grid

Section

A small grid whose tiles open in place. A tile grows to fill the grid while the others step back, shows its details, then folds back into its spot. Click any tile to open it.

Inference preview

Inference

Section

An AI inference board drawn as an isometric machine in black and champagne gold: a request arrives at the network cage, the CPU tokenizes it, it crosses PCIe to the GPU, whose compute tiles and HBM stacks run prefill and decode, and tokens stream back out.

Server Racks Isometric preview

Server Racks Isometric

Section

The server rack row as an isometric 3D model: black cabinets on a raised floor, a gold cable bed overhead and a cooling manifold across the tops. Hover or pick a rack to slide a compute tray out and swing its door open.

Server Racks preview

Server Racks

Section

A row of AI server racks seen straight on: black cabinets, champagne-gold compute trays, mesh doors and warm light in the dark. Racks power up as it scrolls in and tray lights ripple; hover or pick a rack to light it up.

Live Activity Map preview

Live Activity Map

Section

A dotted world map where signups, upgrades, payments and deploys pop up as they happen, with a live feed beside it. Hover a row to find it on the map. Pass your own events or let it simulate; it pauses off screen and has a pause button.

Bento Shell preview

Bento Shell

Section

A bento grid you set up by picking a layout, text alignment and text position. Ten preset layouts or your own grid areas, tiles with an image placeholder that shows its size, and a builder that copies the JSX.

Workspace Hero preview

Workspace Hero

Section

A team-workspace hero in Instrument Serif over a landscape drawn in code and Bayer-dithered like a print. Four app tiles in the headline fold into one, and the full desktop app below works on its own: tasks tick off, a digest writes itself, a teammate drags a card.

Backups Hero preview

Backups Hero

Section

A database-mirroring hero in Geist over a glacier lake. “Undo anything” rewinds through fading echoes onto a timestamp, and below it the console scrubs back through 24 hours and shows the exact rows a restore would change.

Equity Hero preview

Equity Hero

Section

A cap-table hero in cream, ink and ochre, drawn like a technical figure. The headline's number counts and its noun decodes into each deal while a ledger on graph paper braces dozens of holders into one vehicle row. Split or centred, with an espresso dark mode.

Cash-flow Hero preview

Cash-flow Hero

Section

A cash-forecasting hero in Recoleta over a desert waterfall. Water rises and drains inside the word “flowing”, and below the headline a calm forecast screen draws the next 13 weeks as a river, switching scenarios on its own.

Field Ops Hero preview

Field Ops Hero

Section

A farm-intelligence hero in Inter over golden hills. A satellite scan line rewrites the headline's reading (soil, water, carbon, yield), and below it a map-first farm app switches layers on its own under a passing satellite.

Deploy Hero preview

Deploy Hero

Section

A cloud-platform hero in Recoleta under a real sky with cut-out clouds drifting at five depths. The headline's last word condenses inside a frosted glass capsule like vapour, and below it a deploy fans out from Virginia to eleven regions.

Feature Grid preview

Feature Grid

Section

An icon grid of features with a heading and lede. Plain, as linked cards or divided by hairlines, in two to four columns, and fades in as it scrolls into view.

Feature Rows preview

Feature Rows

Section

Alternating feature rows: copy, points and a link beside a cropped product shot, swapping sides down the page.

Feature Tabs preview

Feature Tabs

Section

Feature tabs that advance on their own while in view, with a progress line under the active tab. They stop once you pick one.

Sticky Features preview

Sticky Features

Section

Steps scroll past while the visual beside them stays pinned and changes to match the step in view.

Feature Accordion preview

Feature Accordion

Section

An accordion of features where the open item drives the picture beside it.

Feature Checklist preview

Feature Checklist

Section

Everything included, as grouped checklists, with items still to come marked as soon.

Feature Personas preview

Feature Personas

Section

A role switcher: tabs by team change the headline, points, quote and picture.

Pricing Tiers preview

Pricing Tiers

Section

Three pricing tiers with a monthly or yearly switch, a highlighted plan and an enterprise row.

Seat Pricing preview

Seat Pricing

Section

A seat slider: totals for every plan update with team size.

Usage Pricing preview

Usage Pricing

Section

Usage-based pricing: a slider per meter, a monthly estimate and a line-by-line breakdown.

Token Pricing preview

Token Pricing

Section

AI token pricing: per-model prices per million tokens and a monthly cost estimator.

Credit Packs preview

Credit Packs

Section

Credit packs: pick a pack and see what it buys.

Pricing Comparison preview

Pricing Comparison

Section

A plan comparison table with a sticky plan header, folding groups and rows that explain themselves.

Logo Cloud preview

Logo Cloud

Section

Customer logos as a hairline grid or one quiet row that wraps, with a short title above.

Logo Marquee preview

Logo Marquee

Section

Two rows of logos scrolling in opposite directions. Pauses on hover, on focus and off screen.

Logo Claim preview

Logo Claim

Section

A big number and a star rating beside a grid of customer logos.

Logo Quotes preview

Logo Quotes

Section

Customer logos that each show a one-line quote on hover, focus or tap.

Logo Swap preview

Logo Swap

Section

More logos than slots: one slot at a time swaps to the next mark.

Testimonial Wall preview

Testimonial Wall

Section

A wall of love: testimonial cards in columns with stars and bylines, folded behind a show more button.

Testimonial Quote preview

Testimonial Quote

Section

One big quote with the person, their company logo and two results.

Testimonial Carousel preview

Testimonial Carousel

Section

A testimonial carousel you drag, swipe, key or click through. Snaps to each card and never autoplays.

Video Testimonials preview

Video Testimonials

Section

Video stories as posters that play in place with captions.

Case Studies preview

Case Studies

Section

Case study cards that lead with the result, then the company and the story.

Rating Summary preview

Rating Summary

Section

An overall score with a star breakdown, review-site badges and recent reviews.

Post Cards preview

Post Cards

Section

Testimonials as social-style posts from made-up people.

Stats Band preview

Stats Band

Section

Big numbers that count up once they scroll into view.

Stats with Sparklines preview

Stats with Sparklines

Section

Stat cards, each with a small trend line and the change.

Stats Split preview

Stats Split

Section

A statement on the left and its numbers on the right.

Live Counter preview

Live Counter

Section

A live counter that ticks only while on screen, and stays still off screen and for reduced motion.

FAQ preview

FAQ

Section

Questions as a single-column accordion that can add FAQPage structured data.

FAQ Two Column preview

FAQ Two Column

Section

The question list on the left and the selected answer on the right.

FAQ Search preview

FAQ Search

Section

Topic tabs with search that filters as you type and highlights matches.

FAQ with Contact preview

FAQ with Contact

Section

An FAQ accordion beside a “Still stuck?” support card.

CTA Banner preview

CTA Banner

Section

A closing call-to-action banner in muted, dark or the accent colour, with two buttons and a note.

CTA with Visual preview

CTA with Visual

Section

A call to action with copy beside a product shot cropped at the edge.

Install CTA preview

Install CTA

Section

An install command to copy, with a package manager picker.

Book a Demo preview

Book a Demo

Section

A book-a-demo picker: choose a day and a time in place, no modal.

Sticky CTA preview

Sticky CTA

Section

A sticky call-to-action bar that appears after the hero and hides near the footer.

Gradient Bar Chart preview

Gradient Bar Chart

Chart

Columns that spring up on a dashed grid, with a pointer-following tooltip — soft gradient fills that fade into the floor.

Outlined Bar Chart preview

Outlined Bar Chart

Chart

Columns that spring up on a dashed grid, with a pointer-following tooltip — hairline outlines over a faint tint.

Gradient Stacked Bar Chart preview

Gradient Stacked Bar Chart

Chart

Columns of stacked segments that rise together, with every series and the total in the tooltip — soft gradient fills that fade into the floor.

Outlined Stacked Bar Chart preview

Outlined Stacked Bar Chart

Chart

Columns of stacked segments that rise together, with every series and the total in the tooltip — hairline outlines over a faint tint.

Gradient Horizontal Bar Chart preview

Gradient Horizontal Bar Chart

Chart

A ranked list of bars that slide out one after another, label inside and value at the end — soft gradient fills that fade into the floor.

Outlined Horizontal Bar Chart preview

Outlined Horizontal Bar Chart

Chart

A ranked list of bars that slide out one after another, label inside and value at the end — hairline outlines over a faint tint.

Gradient Line Chart preview

Gradient Line Chart

Chart

Smooth lines that draw in from the left, with a crosshair tooltip across every series — soft gradient fills that fade into the floor.

Outlined Line Chart preview

Outlined Line Chart

Chart

Smooth lines that draw in from the left, with a crosshair tooltip across every series — hairline outlines over a faint tint.

Gradient Area Chart preview

Gradient Area Chart

Chart

Filled trends that sweep in from the left, overlapping or stacked, with a crosshair tooltip — soft gradient fills that fade into the floor.

Outlined Area Chart preview

Outlined Area Chart

Chart

Filled trends that sweep in from the left, overlapping or stacked, with a crosshair tooltip — hairline outlines over a faint tint.

Gradient Spark Chart preview

Gradient Spark Chart

Chart

Word-sized line, area or bar trends for stat cards and table rows — soft gradient fills that fade into the floor.

Gradient Pie Chart preview

Gradient Pie Chart

Chart

Wedges with thin gaps that sweep in clockwise; hovering pops a wedge outward — soft gradient fills that fade into the floor.

Outlined Pie Chart preview

Outlined Pie Chart

Chart

Wedges with thin gaps that sweep in clockwise; hovering pops a wedge outward — hairline outlines over a faint tint.

Gradient Donut Chart preview

Gradient Donut Chart

Chart

A ring or semi-circle gauge of rounded segments that sweep in one after another, with the hovered value in the middle — soft gradient fills that fade into the floor.

Outlined Donut Chart preview

Outlined Donut Chart

Chart

A ring or semi-circle gauge of rounded segments that sweep in one after another, with the hovered value in the middle — hairline outlines over a faint tint.

Gradient Radial Chart preview

Gradient Radial Chart

Chart

Concentric progress rings that fill clockwise one after another, with a centre readout and legend — soft gradient fills that fade into the floor.

Gradient Hexagon Chart preview

Gradient Hexagon Chart

Chart

A radar chart on a hexagonal grid; each series grows out of the centre — soft gradient fills that fade into the floor.

Outlined Hexagon Chart preview

Outlined Hexagon Chart

Chart

A radar chart on a hexagonal grid; each series grows out of the centre — hairline outlines over a faint tint.

Gradient Heatmap preview

Gradient Heatmap

Chart

A grid shaded by value that cascades in diagonally, with a row-and-column crosshair on hover — soft gradient fills that fade into the floor.

Gradient Funnel Chart preview

Gradient Funnel Chart

Chart

One band that narrows stage by stage, with counts, shares and step-conversion pills — soft gradient fills that fade into the floor.

Outlined Funnel Chart preview

Outlined Funnel Chart

Chart

One band that narrows stage by stage, with counts, shares and step-conversion pills — hairline outlines over a faint tint.

Gradient Category Bar preview

Gradient Category Bar

Chart

One bar divided into coloured ranges, with a marker that slides to the current value — soft gradient fills that fade into the floor.

Outlined Category Bar preview

Outlined Category Bar

Chart

One bar divided into coloured ranges, with a marker that slides to the current value — hairline outlines over a faint tint.

Gradient Segmented Progress preview

Gradient Segmented Progress

Chart

A row of status blocks — uptime, streaks, steps — that pop up left to right with tooltips — soft gradient fills that fade into the floor.

Effort Slider preview

Effort Slider

AI

A stepped slider in an enclosed track: a row of dots lights up behind a rounded-square thumb, and sparkles fly only on the top step

Streaming Text preview

Streaming Text

AI

An answer that streams in word by word from a blur, with a glowing caret, citation chips and an action bar

Web Search preview

Web Search

AI

A query typing into a search pill, sources resolving from skeletons, read one by one, then folding into a favicon stack

Sketch Persona preview

Sketch Persona

AI

A hand-drawn assistant whose ink lines boil like a flip-book: a round doodle, a whiskered kitty, a loopy-eared bunny or a floating ghost. It blinks when idle, goes wide-eyed to listen, draws a pencil spiral to think, and talks to speak. Ink follows the text colour.

Paper Persona preview

Paper Persona

AI

An assistant cut from paper, with grain and soft shadows that shift in parallax: a sprout, a floppy-eared bunny, a whiskered kitty or a puffy cloud. It leans in to listen, holds its chin to think, and waves as it speaks. Click it to make it hop.

Fuzz Persona preview

Fuzz Persona

AI

A velvet-furred pyramid, cube, gem, heart or orb with bead eyes that can wear glasses, a hat or headphones. Listening breathes a soft aura, thinking sends light around its edge and across the fur, and speaking swells with the voice.

Metal Orb preview

Metal Orb

AI

An assistant persona as a drop of liquid metal on the GPU: it mirrors a softbox studio, tints to any colour and shimmers at the edge. Idle flows, listening draws ripples in, thinking rolls swells under the surface, speaking ripples out.

Pixel Persona preview

Pixel Persona

AI

A pixel creature for an assistant: blob, ghost, bot or cat on a 32×32 grid with dithered shading and a glow. It blinks and bobs when idle, opens wide to listen, glances up with ticking dots to think, and talks and bounces to speak.

Persona Orb preview

Persona Orb

AI

Assistant personas as orbs of light, shaded like Edge Cloud on the GPU. Idle breathes, listening pulls rings inward, thinking lights drifting veins around a beating core, speaking wobbles and flares with the voice. Persona colours fade.

Site Header preview

Site Header

Section

A sticky marketing header with mega menus and a what's-new card, a log-in link and CTA. It can sit transparent over the hero and turn solid on scroll, float as a pill that tightens, hold an announcement bar, and fold into an accordion menu on narrow screens.

Site Footer preview

Site Footer

Section

Sitemap columns with badges, a newsletter box with validation and a confirmation, a status pill, social links, a language picker and a system, light and dark switch. Also a large wordmark version and a one-row minimal footer.

Announcement Pill preview

Announcement Pill

Section

The “New: … →” chip that sits above a hero heading, with a tag, a megaphone or a live dot, in soft, outline and glass styles. Also a full-width announcement bar that folds away when dismissed.

Product Shot preview

Product Shot

Section

Real-looking product screens without screenshots: a dashboard, AI chat, editor, board, inbox, analytics and settings. Each is coded at a fixed canvas and scaled to fit, so it stays crisp at any width, with crops, a spotlight, a faded edge and browser, window or laptop frames.

Device Frames preview

Device Frames

Section

Browser (full chrome with tabs, or minimal), laptop, phone, tablet, terminal, code editor and desktop window frames in CSS, for light and dark, with 3D tilts, a glass sheen and a floor shadow.

Section Shell preview

Section Shell

Section

The container every marketing section sits in: four widths, a vertical rhythm, plain, muted and inverted tones, a divider and a background slot. Also the shared heading block, the marketing buttons, quiet patterns and the tokens that restyle every section.

Brand Marks preview

Brand Marks

Section

Thirty made-up company logos as lockups, glyphs or wordmarks in mono or colour, and forty made-up app icons, for logo clouds, testimonials and integration grids. None of them are real.

Reveal preview

Reveal

Section

One-shot entrances (fade, rise, blur, scale) that play the first time something scrolls into view, a stagger for grids, and hooks that run ambient visuals only while they're on screen, in a foreground tab and allowed to move.

Gradient Scatter Chart preview

Gradient Scatter Chart

Chart

Points or bubbles that pop in left to right on a dashed grid; hovering finds the nearest point and drops guides to both axes — soft gradient fills that fade into the floor.

Outlined Scatter Chart preview

Outlined Scatter Chart

Chart

Points or bubbles that pop in left to right on a dashed grid; hovering finds the nearest point and drops guides to both axes — hairline outlines over a faint tint.

Gradient Combo Chart preview

Gradient Combo Chart

Chart

Columns and a smooth line on their own axes; columns spring up, then the line draws across them, and hovering lists both — soft gradient fills that fade into the floor.

Outlined Combo Chart preview

Outlined Combo Chart

Chart

Columns and a smooth line on their own axes; columns spring up, then the line draws across them, and hovering lists both — hairline outlines over a faint tint.

Gradient Waterfall Chart preview

Gradient Waterfall Chart

Chart

Changes that float from the running total, joined by dashed connectors, with totals on the floor; columns grow in one after another — soft gradient fills that fade into the floor.

Outlined Waterfall Chart preview

Outlined Waterfall Chart

Chart

Changes that float from the running total, joined by dashed connectors, with totals on the floor; columns grow in one after another — hairline outlines over a faint tint.

Gradient Diverging Bar Chart preview

Gradient Diverging Bar Chart

Chart

Columns that grow up or down from a zero line in their own colours, with signed values at their ends — soft gradient fills that fade into the floor.

Outlined Diverging Bar Chart preview

Outlined Diverging Bar Chart

Chart

Columns that grow up or down from a zero line in their own colours, with signed values at their ends — hairline outlines over a faint tint.

Gradient Candlestick Chart preview

Gradient Candlestick Chart

Chart

Open, high, low and close per period with volume underneath; candles open from their midpoint, and hovering draws a crosshair and tags the close — soft gradient fills that fade into the floor.

Outlined Candlestick Chart preview

Outlined Candlestick Chart

Chart

Open, high, low and close per period with volume underneath; candles open from their midpoint, and hovering draws a crosshair and tags the close — hairline outlines over a faint tint.

Gradient Treemap preview

Gradient Treemap

Chart

Tiles sized by value and laid out squarified, settling in largest first with labels where they fit; hovering shows the value and share — soft gradient fills that fade into the floor.

Outlined Treemap preview

Outlined Treemap

Chart

Tiles sized by value and laid out squarified, settling in largest first with labels where they fit; hovering shows the value and share — hairline outlines over a faint tint.

Gradient Waffle Chart preview

Gradient Waffle Chart

Chart

Shares of a whole as a grid of squares, one per percent, filling column by column with a legend beside; hovering lifts one category — soft gradient fills that fade into the floor.

Outlined Waffle Chart preview

Outlined Waffle Chart

Chart

Shares of a whole as a grid of squares, one per percent, filling column by column with a legend beside; hovering lifts one category — hairline outlines over a faint tint.

Gradient Sankey Chart preview

Gradient Sankey Chart

Chart

Nodes stacked in columns by what flows through them, with ribbons revealed left to right; hovering a ribbon or node picks out its flows — soft gradient fills that fade into the floor.

Outlined Sankey Chart preview

Outlined Sankey Chart

Chart

Nodes stacked in columns by what flows through them, with ribbons revealed left to right; hovering a ribbon or node picks out its flows — hairline outlines over a faint tint.

Agent Canvas Landing preview

Agent Canvas Landing

Section

A white, monochrome landing page for a made-up agent canvas. The headline rolls through what the agents do, and the canvas below follows it, selecting and playing in each task's frame. Nav, hero, canvas, agents, steps, quote, CTA and footer each live in their own file.

AllMarketing UIApp UIAIChartsBackgroundsText