Bling Transition

An image A → B transition with palette-tinted sparkle cores blooming along the wipe boundary — fbm-driven wipe, IQ-palette kaleidoscope sparkles only at the moving edge, ping-pong looping.

bling-transition

0px

Customize

Edit props; preview updates instantly.

Customize

Palette

Direction

Duration

4200ms

Hold

1800ms

Intensity

0.0050

Iterations

Sparkle

1.00

Softness

0.22

Distortion

0.080

Drip

0.55

Props

Props accepted by BlingTransition.

Prop	Type	Default	Description
imageA	string	—	URL of the first image. Loaded via `THREE.TextureLoader` with `crossOrigin = anonymous`; `LinearFilter` and no mipmaps so the texture stays sharp.
imageB	string	—	URL of the second image. Same loader settings as `imageA`. Both must finish loading before the first frame paints.
progress	number	—	Controlled progress 0–1. When provided, the internal phase machine and autoPlay are bypassed — the parent fully owns the sweep.
autoPlay	boolean	true	Animate progress automatically through forward → hold → backward → hold → loop. Ignored when `progress` is supplied.
duration	number	2400	Full A → B sweep, in milliseconds.
hold	number	1200	How long to pause at each end of the sweep when looping, in milliseconds.
loop	boolean	true	Ping-pong forever. When `false`, the sweep plays once and stops at B.
palette	"iris" \| "ember" \| "ice" \| "silver"	"iris"	Color palette for the sparkle bloom at the wipe boundary. Built from IQ's `a + b * cos(2π(c*t + d))` formula.
intensity	number	0.005	Sparkle-core brightness (≈ 0.001–0.02). Driven by `pow(intensity / \|d\|, 1.5)` so small bumps make a big visual difference.
iterations	number	4	Kaleidoscope fold count (1–6). More folds = more sparkle structure at the boundary.
sparkleStrength	number	1	How much the sparkle layer contributes at the boundary (0–2). The sparkle is multiplied by the boundary edge weight, so it only ever appears at the moving wipe — never on settled regions.
softness	number	0.22	Soft edge of the boundary mask. `0` is a hard wipe; `0.5` is a wide fade. The progress sweep itself is eased with `cubic-in-out`, so the overall motion stays gentle even at low softness.
distortion	number	0.08	UV refraction amplitude at the wipe boundary, in UV units. Bends both images at the moving edge for a glassy look.
noiseScale	number	2.4	Scale of the fbm field that drives the wipe shape. Higher = finer streaks.
drip	number	0.55	Direction bias (0 = pure noise blob, 1 = pure directional wipe).
direction	"noise" \| "horizontal" \| "vertical" \| "radial"	"noise"	Direction the wipe sweeps in. `noise` ignores direction and uses pure fbm.
onComplete	() => void	—	Fires when the forward sweep finishes — and again at each end when looping.
className	string	—	Extra class names merged onto the mount wrapper. Width and height are governed here — the canvas fills the container.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/bling-transition.json

Usage

Import the component and drop it into a render.

demo.tsx21 lines

import { BlingTransition } from "@/components/lazy-ui/bling-transition";

export function Demo() {
  return (
    <BlingTransition
      imageA="/images/before.jpg"
      imageB="/images/after.jpg"
      palette="iris"
      duration={2400}
      hold={1200}
      intensity={0.005}
      iterations={4}
      sparkleStrength={1}
      softness={0.22}
      distortion={0.08}
      drip={0.55}
      direction="noise"
      className="h-[480px] w-full rounded-2xl"
    />
  );
}