46 Pro components and page blocks

Get Pro
uibrik

LED Spire

Pro

Preview

Customize

Colors
Background
Intensity1.00
Strips16
Neck0.16
Flare0.42
Curve2.4
Soften0.85
Halo0.70
Wash0.50
Rise1.6s
Rate0.80/s
Lag0.12s
Blend0.35
Speed1.0
Grain0.040
Glint0.80
Bulge0.90
Pulse1.00

Usage

import { LedSpire } from "@/components/uibrik/led-spire/led-spire";

<LedSpire />

Installation

Pro

LED Spire is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/led-spire

Props

LedSpire
colors
Type string[]
["#c81d25","#ff5a1f","#ffa630","#ffe0a3","#fff7ea"]
The sequence, from the centre strip out to the edge. 2 to 6 colours.
background
Type string
"#030303"
Colour behind the spire.
intensity
Type number
1
Brightness of the strips.
strips
Type number
16
How many strips across the spire.
neck
Type number
0.16
Half-width at the top, as a fraction of the height.
flare
Type number
0.42
How much wider the spire gets at the bottom.
curve
Type number
2.4
How late the flare starts; higher stays narrow for longer.
soften
Type number
0.85
How far neighbouring strips blend into each other; 0 keeps hard edges.
halo
Type number
0.7
Glow spilling past the outer strips.
wash
Type number
0.5
Pale light pooling at the bottom.
rise
Type number
1.6
Seconds each wave takes to climb from the bottom to the top.
rate
Type number
0.8
Waves per second: how often colours move one strip out from the centre.
lag
Type number
0.12
Seconds each strip starts its climb after its inner neighbour.
blend
Type number
0.35
0 snaps from colour to colour like LEDs, 1 fades through each step.
speed
Type number
1
Animation speed; 1 is the designed pace.
grain
Type number
0.04
Film grain strength.
animate
Type boolean
true
Move on its own. Off draws one still frame.
interactive
Type boolean
true
React to the pointer.
glint
Type number
0.8
How strongly the pointer spotlights the strips under it.
bulge
Type number
0.9
How much the strips swell apart around the pointer.
pulse
Type number
1
Brightness of the pulse a click sends through the strips; 0 turns clicks off.
children
Type ReactNode
–
Content shown on top of the background.
className
Type string
–
Classes for the box; it fills whatever size you give it.