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.

67 results for “line”

67 results for “line”

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.

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.

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.

Perimeter preview

Perimeter

Text effect

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

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.

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.

Inkwell preview

Inkwell

Text effect

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

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.

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.

Blur Reveal Text preview

Blur Reveal Text

Text effect

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

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.

Thinking Trail preview

Thinking Trail

AI

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

Feature Personas preview

Feature Personas

Section

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

Usage Pricing preview

Usage Pricing

Section

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

Logo Cloud preview

Logo Cloud

Section

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

Logo Quotes preview

Logo Quotes

Section

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

Testimonial Wall preview

Testimonial Wall

Section

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

Stats with Sparklines preview

Stats with Sparklines

Section

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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