Skip to content

Material · mesh · Free

Mesh Still

Quiet static mesh gradient for heroes and sectional bands — sea palette.

Type
mesh
Contexts
hero · section
Tags
mesh · static · gradient · sea
Perf
webgl · StaticMeshGradient — free for full-bleed heroes; no GPU loop cost.

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.

Install

free

Install under 60s — CLI or copy-paste, no account required.

CLI

npx shadcn@latest add @frameline/mesh-still

Copy-paste path

components/ui/mesh-still.tsx

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

Installation docs

Free — no account required. Source lands in your repo. Full install guide.

License

$0

Free

Excellent free materials. Same craft bar as paid.

Permitted

  • Install free SKUs into your projects
  • Commercial use of free materials
  • Copy / CLI install without an account

Not permitted

  • Redistribute source packages
  • Resell materials in templates or asset kits

Compare Free, Personal, and Team on Pricing.

JSX

import { MeshStill } from "@/materials";

<MeshStill
  positions={4}
  waveX={0.5}
  waveY={0.9}
  mixing={0.55}
  grainOverlay={0.05}
  rotation={0}
  waveXShift={0.15}
  waveYShift={0.55}
  grainMixer={0}
  colors={["#013B65","#03738C","#A3D3FF","#F2FAEF"]}
  className="absolute inset-0"
/>

Props

NameTypeDefaultDescription
positionsnumber4Mesh control points
waveXnumber0.5Horizontal wave
waveYnumber0.9Vertical wave
mixingnumber0.55Color mixing
grainOverlaynumber0.05Grain overlay
rotationnumber0Rotation degrees
waveXShiftnumber0.15Horizontal wave shift
waveYShiftnumber0.55Vertical wave shift
grainMixernumber0Grain mix
colorscolors#013B65, #03738C, #A3D3FF, #F2FAEFMesh color stops
Frameline

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

© 2026 Frameline. All rights reserved.

Sera · Stone · Blue