Material · mesh · Paid

Voronoi Soft

Soft pastel cell field for loading shells and empty states.

Type: mesh
Contexts: loading · empty
Tags: mesh · voronoi · pastel · soft
Perf: webgl · Lower density than Cell Voronoi — fine for loading and empty shells.

Configurator

Pause freezes the live preview. Reduced motion uses the CSS shell fallback. Reset restores catalog defaults and clears config URL params. Share config copies this page link.

Speed0.25Scale0.70Distortion0.20Gap0.02Glow0.08GapGlow

Get access

personal

CLI

npx shadcn@latest add @frameline/voronoi-soft

Copy-paste path

components/ui/voronoi-soft.tsx

Drop source beside your UI kit, or paste JSX from the panel below after install.

Buy license

Install unlocks after purchase. Preview JSX is for evaluation. Full install guide.

License

$99

Personal

All personal materials · commercial rights · updates.

Permitted

All personal-tier SKUs via registry
Commercial projects under your name
Email receipt + account reinstall

Not permitted

Client deliverables under a studio seat
Redistribute source packages

Compare Free, Personal, and Team on Pricing.

JSX

import { VoronoiSoft } from "@/materials";

<VoronoiSoft
  speed={0.25}
  scale={0.7}
  distortion={0.2}
  gap={0.02}
  glow={0.08}
  colors={["#F5E6F0","#D4E8F0","#E8F0D4"]}
  colorGap="#F7F5F0"
  colorGlow="#FFFFFF"
  className="absolute inset-0"
/>

Props

Name	Type	Default	Description
speed	number	0.25	Animation speed
scale	number	0.7	Cell scale
distortion	number	0.2	Cell warp
gap	number	0.02	Gap between cells
glow	number	0.08	Edge glow
colors	colors	#F5E6F0, #D4E8F0, #E8F0D4	Cell fill colors
colorGap	color	#F7F5F0	Gap color
colorGlow	color	#FFFFFF	Glow color

Frameline

Design assets for the AI era — shippable surface so you don’t ship the default look.

Product

Resources

Company

Account

Sera · Stone · Blue