81 Pro components and page blocks

Get Pro
uibrik

Thermal Logo

Pro

Preview

Customize

Colors
Bottom to top
Duration4.4s
Churn1.00
Shimmer1.00
Bands0.75
Glow1.00
Grain0.80
Logo size0.60
Thickness0.28
Bevel0.040
Tilt18°
Sway3.0°
Size320px

Installation

Pro

Thermal Logo 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/thermal-logo

Usage

import { ThermalLogo } from "@/components/uibrik/thermal-logo/thermal-logo";​const colors = ["#ffffff", "#f3a8ff", "#ff7a3d", "#ffe9b8", "#8fd6ff", "#3a9bee", "#1747c2", "#081a85", "#030a45"];​<ThermalLogo  colors={colors}  direction="up"  duration={4.4}  churn={1}  shimmer={1}  bands={0.75}  glow={1}  grain={0.8}  logoScale={0.6}  thickness={0.28}  bevel={0.04}  tilt={18}  sway={3}  animate  size={320}  label="Thermal logo"  // logoPath={["…"]}/>

Props

ThermalLogo
colors
Type string[]
["#ffffff","#f3a8ff","#ff7a3d","#ffe9b8","#8fd6ff","#3a9bee","#1747c2","#081a85","#030a45"]
The palette from cold to hot. The cold end fades into the page.
direction
Type "up" | "down" | "right" | "left"
"up"
Which way the heat travels.
duration
Type number
4.4
Seconds for one band to pass through.
churn
Type number
1
Plumes of turbulence curling through the heat.
shimmer
Type number
1
How much the air around the logo ripples.
bands
Type number
0.75
How much the rising bands warm and cool the logo.
glow
Type number
1
How far the heat haze spreads around the logo.
grain
Type number
0.8
Live sensor grain over the image.
logoScale
Type number
0.6
Logo size, as a share of the frame.
thickness
Type number
0.28
How far the logo is pushed out, as a share of its size.
bevel
Type number
0.04
Size of the rounded bevel on the front and back edges.
tilt
Type number
18
Most the logo leans toward the pointer. 0 turns it off.
sway
Type number
3
Idle sway.
animate
Type boolean
true
Let the heat move. Off holds one frame.
size
Type number
320
Width of the frame; it shrinks to fit its container.
logoPath
Type string | string[]
–
Your own logo as one or more SVG path d strings on a 24 × 24 grid. Defaults to the uibrik mark.
label
Type string
"Thermal logo"
Read out to screen readers.
className
Type string
–
Classes for the frame.