46 Pro components and page blocks

Get Pro
uibrik

Ice Tiles

Pro

Preview

Customize

Colors
Tile111px
Gap0.0px
Radius14px
Bevel25px
Magnify0.60
Refraction1.00
Frost1.25
Milk0.25
Gloss0.65
Dispersion0.80
Blob size1.45
Warp1.25
Speed1.0
Grain0.030
Seed0
Pull0.70
Clear0.70
Reach180px
Follow0.80

Usage

import { IceTiles } from "@/components/uibrik/ice-tiles/ice-tiles";

<IceTiles />

Installation

Pro

Ice Tiles 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/ice-tiles

Props

IceTiles
colors
Type string[]
["#f7f5fc","#e6d6fb","#c58cf0","#9a4fe6","#6a2bd9"]
From the pale base to the deepest blob, blended in OKLCH; 2 to 6 colours.
tile
Type number
111
Size of each cube; rounded so a whole number of cubes fills the box.
gap
Type number
0
Gap between cubes.
radius
Type number
14
Corner radius of each cube.
bevel
Type number
25
Width of the bevelled edge.
magnify
Type number
0.6
How much of the scene each cube shows; lower steps the colour more from cube to cube.
refraction
Type number
1
How far the bevels bend toward the neighbouring colour.
frost
Type number
1.25
Blur through the ice.
milk
Type number
0.25
Milky white toward the edges.
gloss
Type number
0.65
Highlight and shade on the bevels.
dispersion
Type number
0.8
Colour split on the bevels.
blobSize
Type number
1.45
Size of the blobs behind the ice.
warp
Type number
1.25
How uneven the blobs are.
speed
Type number
1
Animation speed; 1 is the designed pace.
grain
Type number
0.03
Film grain strength.
seed
Type number
0
Shifts the composition, so two backgrounds with the same settings still differ.
animate
Type boolean
true
Move on its own. Off draws one still frame.
interactive
Type boolean
true
React to the pointer.
pull
Type number
0.7
Strength of the blob of colour the pointer drags behind the ice.
clear
Type number
0.7
How much the ice clears near the pointer.
reach
Type number
180
How far the pointer reaches.
follow
Type number
0.8
How lazily the colour follows the pointer, 0 (locked) to 1 (drifts after it).
children
Type ReactNode
–
Content shown on top of the background.
className
Type string
–
Classes for the box; it fills whatever size you give it.