Material · mesh · Paid

Ember Warp

Warped ember mesh for heroes and sectional heat fields.

Type: mesh
Contexts: hero · section
Tags: mesh · warp · ember · motion
Perf: webgl · Warp mesh is mid-heavy — one hero instance; static fallback for grids.

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.70Proportion0.45Softness0.85Distortion0.30Swirl0.65Shape scale0.12

Get access

team

CLI

npx shadcn@latest add @frameline/ember-warp

Copy-paste path

components/ui/ember-warp.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

$299

Team

Client-work rights · seats · invoice-ready.

Permitted

Everything in Personal
Client deliverables and multi-seat clarity
Priority support

Not permitted

Redistribute source packages
Resell materials in templates or asset kits

Compare Free, Personal, and Team on Pricing.

JSX

import { EmberWarp } from "@/materials";

<EmberWarp
  speed={0.7}
  proportion={0.45}
  softness={0.85}
  distortion={0.3}
  swirl={0.65}
  shapeScale={0.12}
  colors={["#0A0A0A","#C45C26","#1A1210","#E8A05C"]}
  className="absolute inset-0"
/>

Props

Name	Type	Default	Description
speed	number	0.7	Animation speed
proportion	number	0.45	Fill proportion
softness	number	0.85	Edge softness
distortion	number	0.3	Warp amount
swirl	number	0.65	Rotational flow
shapeScale	number	0.12	Shape scale
colors	colors	#0A0A0A, #C45C26, #1A1210, #E8A05C	Warp color stops

Frameline

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

Product

Resources

Company

Account

Sera · Stone · Blue