Smokey Frame

A WebGL smoke rim with noise, falloff, and optional pointer turbulence. Defaults to SonoJS primary blue. Respects prefers-reduced-motion. This docs preview uses a black stage so the glow stays visible.

Default

Procedural smoke along the border. Move the pointer to push the field. Preview stage is black so the emission reads clearly.

Loading…

Installation

CLI

npx @sonojs/ui@latest add smokey-frame

Usage

page.tsx

"use client"

import { SmokeyFrame } from "@/components/3d/smokey-frame"

export default function Page() {
  return (
    <div className="relative h-[520px] w-full overflow-hidden rounded-[12px] bg-black">
      <SmokeyFrame
        className="h-full w-full"
        frameColor="#2563EB"
        frameWidth={0.3}
        interactive
      >
        <p className="text-sm text-white/80">Your content</p>
      </SmokeyFrame>
    </div>
  )
}

Props

Prop	Type	Default	Description
frameColor	string	"#2563EB"	Smoke / emission color (hex or rgb).
frameBgColor	string	-	Interior fill when `transparentBg` is false. Defaults from light/dark html class.
transparentBg	boolean	true	Leave the center transparent for slotted content.
frameWidth	number	0.3	Normalized rim thickness from the edge (0.01–0.5).
speed	number	0.15	Smoke animation speed.
falloff	number	6	Edge sharpness exponent.
noiseScale	number	3	Noise granularity.
noiseStrength	number	1	How much noise modulates the rim (0–1).
intensity	number	1.2	Emission brightness.
gamma	number	2	Contrast curve.
opacity	number	1	Overall canvas opacity.
interactive	boolean	true	Pointer displaces the smoke field.
glow	boolean	true	Soft radial glow behind the frame.
glowBlur	number	36	Glow blur in px.
glowOpacity	number	0.45	Glow opacity.
radius	string · number	"12px"	Corner radius.
dpr	number	2	Max device pixel ratio.
children	ReactNode	-	Content centered over the transparent interior.
className	string	-	Outer wrapper classes.
canvasClassName	string	-	Canvas element classes.