Material · mesh · Paid
Pulse Frame
Glowing pulsing border contour for heroes and framed card surfaces.
- Type
- mesh
- Contexts
- hero · card
- Tags
- mesh · border · pulse · glow
- Perf
- webgl · PulsingBorder + smoke uses noise texture — heavier; one hero or card max.
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.
Get access
teamCLI
npx shadcn@latest add @frameline/pulse-frame
Copy-paste path
components/ui/pulse-frame.tsx
Drop source beside your UI kit, or paste JSX from the panel below after install.
Install unlocks after purchase. Preview JSX is for evaluation. Full install guide.
License
$299Team
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 { PulseFrame } from "@/materials";
<PulseFrame
speed={0.7}
scale={0.75}
roundness={0.2}
thickness={0.12}
softness={0.7}
intensity={0.25}
bloom={0.3}
spots={4}
spotSize={0.45}
pulse={0.3}
smoke={0.25}
smokeSize={0.55}
colorBack="#0A0A0A"
colors={["#2D6BFF","#5B8CFF","#AF52DE"]}
className="absolute inset-0"
/>Props
| Name | Type | Default | Description |
|---|---|---|---|
| speed | number | 0.7 | Animation speed |
| scale | number | 0.75 | Frame scale |
| roundness | number | 0.2 | Corner roundness |
| thickness | number | 0.12 | Border thickness |
| softness | number | 0.7 | Edge softness |
| intensity | number | 0.25 | Glow intensity (preview-only default) |
| bloom | number | 0.3 | Bloom amount |
| spots | number | 4 | Spot count |
| spotSize | number | 0.45 | Spot size (preview-only default) |
| pulse | number | 0.3 | Pulse amount |
| smoke | number | 0.25 | Smoke amount |
| smokeSize | number | 0.55 | Smoke size (preview-only default) |
| colorBack | color | #0A0A0A | Background color |
| colors | colors | #2D6BFF, #5B8CFF, #AF52DE | Border colors |
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