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.

11 results for “lock”

11 results for “lock”

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.

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.

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.

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.

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.

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

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.

AllMarketing UIApp UIAIChartsBackgroundsText