Material · mesh · Free
Radial Still
Still radial bloom from center — quiet focal gravity for auth shells without a motion loop.
- Type
- mesh
- Contexts
- hero · section · auth
- Tags
- mesh · static · radial · gradient
- Perf
- webgl · Static radial — no animation cost; safe for auth and marketing 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.
Install
freeInstall under 60s — CLI or copy-paste, no account required.
CLI
npx shadcn@latest add @frameline/radial-still
Copy-paste path
components/ui/radial-still.tsx
Drop source beside your UI kit, or paste JSX from the panel below after install.
Free — no account required. Source lands in your repo. Full install guide.
License
$0Free
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 { RadialStill } from "@/materials";
<RadialStill
radius={0.9}
focalDistance={0.65}
focalAngle={40}
falloff={0.2}
mixing={0.55}
distortion={0.15}
scale={1}
distortionShift={0.1}
distortionFreq={10}
grainMixer={0.06}
grainOverlay={0.1}
colorBack="#0A0A0A"
colors={["#2D6BFF","#5B8CFF","#E8F0FF"]}
className="absolute inset-0"
/>Props
| Name | Type | Default | Description |
|---|---|---|---|
| radius | number | 0.9 | Radial radius |
| focalDistance | number | 0.65 | Focal distance |
| focalAngle | number | 40 | Focal angle |
| falloff | number | 0.2 | Edge falloff |
| mixing | number | 0.55 | Color mixing |
| distortion | number | 0.15 | Warp amount |
| scale | number | 1 | Pattern scale |
| distortionShift | number | 0.1 | Warp shift |
| distortionFreq | number | 10 | Warp frequency |
| grainMixer | number | 0.06 | Grain mix |
| grainOverlay | number | 0.1 | Grain overlay |
| colorBack | color | #0A0A0A | Background color |
| colors | colors | #2D6BFF, #5B8CFF, #E8F0FF | Radial color stops |
Design assets for the AI era — shippable surface so you don’t ship the default look.
© 2026 Frameline. All rights reserved.
Sera · Stone · Blue