Cloth Banner

Installation#

CLI

npx shadcn@latest add https://hantui-theta.vercel.app/r/cloth-banner.json

Manual

1. Install the dependencies

   npmpnpmbunyarn

   npm install clsx lucide-react motion tailwind-merge

2. Add the shared helpers

   Components use cn() from lib/utils.ts and the motion tokens below. See Installation if you have not set them up yet.

   lib/html-canvas/gl.ts

   /**
    * Small WebGL2 helpers shared by the HTML-in-Canvas components. Shaders work in the canvas's CSS
    * pixels, so a DOMMatrix used to draw an element is the same one passed to `syncElementGeometry`.
    */
   
   /**
    * GLSL: projects a CSS-px position (already multiplied by the draw matrix, so it may carry a
    * perspective w) to clip space. Keeps w for perspective-correct texturing. Needs `uniform vec2 u_canvas`.
    */
   export const PROJECT_GLSL = /* glsl */ `
   uniform vec2 u_canvas;
   vec4 projectCss(vec4 q) {
     return vec4(2.0 * q.x / u_canvas.x - q.w, -(2.0 * q.y / u_canvas.y - q.w), 0.0, q.w);
   }`;
   
   /** GLSL: signed distance to a rounded rectangle centered at the origin (half size `b`, radius `r`). */
   export const ROUND_RECT_GLSL = /* glsl */ `
   float sdRoundRect(vec2 p, vec2 b, float r) {
     vec2 q = abs(p) - b + r;
     return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;
   }`;
   
   function compile(gl: WebGL2RenderingContext, type: number, source: string) {
     const shader = gl.createShader(type);
     if (!shader) throw new Error("Could not create a shader");
     gl.shaderSource(shader, source);
     gl.compileShader(shader);
     if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS) && !gl.isContextLost()) {
       const log = gl.getShaderInfoLog(shader);
       gl.deleteShader(shader);
       throw new Error(`Shader compile failed: ${log}`);
     }
     return shader;
   }
   
   export interface Program {
     program: WebGLProgram;
     /** Cached uniform location lookup. */
     u: (name: string) => WebGLUniformLocation | null;
   }
   
   /** Compiles and links a program. Attribute 0 is always `a_pos`. */
   export function createProgram(gl: WebGL2RenderingContext, vertex: string, fragment: string): Program {
     const program = gl.createProgram();
     if (!program) throw new Error("Could not create a program");
     gl.attachShader(program, compile(gl, gl.VERTEX_SHADER, vertex));
     gl.attachShader(program, compile(gl, gl.FRAGMENT_SHADER, fragment));
     gl.bindAttribLocation(program, 0, "a_pos");
     gl.linkProgram(program);
     if (!gl.getProgramParameter(program, gl.LINK_STATUS) && !gl.isContextLost()) throw new Error(`Program link failed: ${gl.getProgramInfoLog(program)}`);
     const cache = new Map<string, WebGLUniformLocation | null>();
     return {
       program,
       u: (name) => {
         if (!cache.has(name)) cache.set(name, gl.getUniformLocation(program, name));
         return cache.get(name) ?? null;
       },
     };
   }
   
   export interface Mesh {
     vao: WebGLVertexArrayObject;
     count: number;
   }
   
   /** A unit grid over [0, 1]² as indexed triangles, in attribute 0. One cell is a plain quad. */
   export function createGrid(gl: WebGL2RenderingContext, cols = 1, rows = 1): Mesh {
     const vao = gl.createVertexArray();
     if (!vao) throw new Error("Could not create a vertex array");
     gl.bindVertexArray(vao);
     const positions: number[] = [];
     for (let y = 0; y <= rows; y++) for (let x = 0; x <= cols; x++) positions.push(x / cols, y / rows);
     const indices: number[] = [];
     for (let y = 0; y < rows; y++) {
       for (let x = 0; x < cols; x++) {
         const i = y * (cols + 1) + x;
         indices.push(i, i + 1, i + cols + 1, i + 1, i + cols + 2, i + cols + 1);
       }
     }
     const vbo = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
     gl.enableVertexAttribArray(0);
     gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
     const ibo = gl.createBuffer();
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(indices), gl.STATIC_DRAW);
     gl.bindVertexArray(null);
     return { vao, count: indices.length };
   }
   
   /** Draws a mesh from `createGrid`. */
   export function drawMesh(gl: WebGL2RenderingContext, mesh: Mesh, instances = 0) {
     gl.bindVertexArray(mesh.vao);
     if (instances > 0) gl.drawElementsInstanced(gl.TRIANGLES, mesh.count, gl.UNSIGNED_INT, 0, instances);
     else gl.drawElements(gl.TRIANGLES, mesh.count, gl.UNSIGNED_INT, 0);
     gl.bindVertexArray(null);
   }
   
   /** Uploads a DOMMatrix to a mat4 uniform. */
   export function setMatrix(gl: WebGL2RenderingContext, location: WebGLUniformLocation | null, matrix: DOMMatrix) {
     gl.uniformMatrix4fv(location, false, matrix.toFloat32Array());
   }
   
   /** Parses "#rrggbb" into 0–1 RGB. */
   export function rgb(hex: string): [number, number, number] {
     const h = hex.replace("#", "");
     const n = Number.parseInt(h.length === 3 ? h.replace(/./g, (c) => c + c) : h, 16) || 0;
     return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
   }

   Show all 110 lines

   lib/html-canvas/setup.ts

   import type { HtmlCanvasSupport } from "@/lib/html-canvas/support";
   
   /* eslint-disable @typescript-eslint/no-explicit-any -- the API is not in lib.dom yet */
   
   /**
    * Attributes that make a canvas lay out and paint its children, for use in JSX so the canvas is
    * drawable from its first layout: `content="drawable"` on 155+, `layoutsubtree` before that.
    */
   export function drawableCanvasAttributes(support: HtmlCanvasSupport): Record<string, string> {
     if (support.version === "155+") return { content: "drawable" };
     if (support.version === "none") return {};
     return { layoutsubtree: "" };
   }
   
   /** Makes a canvas drawable after the fact (idempotent). */
   export function prepareDrawableCanvas(canvas: HTMLCanvasElement) {
     const c = canvas as any;
     if ("content" in HTMLCanvasElement.prototype) {
       if (canvas.getAttribute("content") !== "drawable") canvas.setAttribute("content", "drawable");
     } else if (!canvas.hasAttribute("layoutsubtree")) {
       canvas.setAttribute("layoutsubtree", "");
       if ("layoutSubtree" in c) c.layoutSubtree = true;
     }
   }
   
   /**
    * Attributes for an element the canvas draws on its own. On 155+ it must carry `drawable`; on older
    * versions it must instead be a direct child of the canvas, which callers arrange in their markup.
    */
   export function drawableElementAttributes(support: HtmlCanvasSupport): Record<string, string> {
     return support.version === "155+" ? { drawable: "" } : {};
   }
   
   /** Asks the canvas for a `paint` event on the next frame, where supported. */
   export function requestCanvasPaint(canvas: HTMLCanvasElement) {
     const c = canvas as any;
     if (typeof c.requestPaint === "function") c.requestPaint();
   }
   /* eslint-enable @typescript-eslint/no-explicit-any */

   Show all 39 lines

   lib/html-canvas/support.ts

   /**
    * Feature detection for the experimental HTML-in-Canvas API (WICG html-in-canvas). The API is a
    * Chrome origin trial, not a standard, and its shape changed in Chrome 150 and 155. Nothing outside
    * `src/lib/html-canvas/` may touch it: every call goes through these adapters.
    *
    * - 155+: `content="drawable"`, `drawable` descendants, `texElementSubImage2D`,
    *   `canvas.updateElementGeometry()` and automatic hit-testing for 2D draws.
    * - 150–154: `layoutsubtree`, `drawElementImage()` returning a DOMMatrix, `texElementImage2D(target,
    *   internalformat, element)` and `canvas.getElementTransform(element, drawTransform)`.
    * - legacy (< 150): `texElementImage2D(target, level, internalformat, format, type, element)`.
    */
   
   export type HtmlCanvasVersion = "155+" | "150-154" | "legacy" | "none";
   
   export interface HtmlCanvasSupport {
     /** `drawElementImage` on 2D contexts. */
     twoD: boolean;
     /** Element textures in WebGL2. */
     webgl: boolean;
     /** Element textures in WebGPU. */
     webgpu: boolean;
     version: HtmlCanvasVersion;
   }
   
   export const NO_SUPPORT: HtmlCanvasSupport = { twoD: false, webgl: false, webgpu: false, version: "none" };
   
   /* eslint-disable @typescript-eslint/no-explicit-any -- the API is not in lib.dom yet */
   let cached: HtmlCanvasSupport | null = null;
   
   /** What this browser supports. Always "none" on the server. Cached after the first call. */
   export function getHtmlCanvasSupport(): HtmlCanvasSupport {
     if (typeof window === "undefined" || typeof HTMLCanvasElement === "undefined") return NO_SUPPORT;
     if (cached) return cached;
     const canvasProto = HTMLCanvasElement.prototype as any;
     const ctx2d = typeof CanvasRenderingContext2D !== "undefined" ? (CanvasRenderingContext2D.prototype as any) : {};
     const gl2 = typeof WebGL2RenderingContext !== "undefined" ? (WebGL2RenderingContext.prototype as any) : {};
     const gpuQueue = typeof (window as any).GPUQueue !== "undefined" ? (window as any).GPUQueue.prototype : {};
   
     const twoD = "drawElementImage" in ctx2d;
     const sub = "texElementSubImage2D" in gl2;
     const tex = "texElementImage2D" in gl2;
     const webgpu = "drawElementImageToTexture" in gpuQueue || "copyElementImageToTexture" in gpuQueue;
   
     let version: HtmlCanvasVersion = "none";
     if (sub || "content" in canvasProto || "updateElementGeometry" in canvasProto) version = "155+";
     else if (tex) version = typeof gl2.texElementImage2D === "function" && gl2.texElementImage2D.length >= 6 ? "legacy" : "150-154";
     else if (twoD || "layoutSubtree" in canvasProto) version = "150-154";
   
     cached = { twoD, webgl: sub || tex, webgpu, version };
     return cached;
   }
   
   /** True when the API can draw into the given context type. */
   export function supportsContext(support: HtmlCanvasSupport, context: "2d" | "webgl2") {
     return support.version !== "none" && (context === "2d" ? support.twoD : support.webgl);
   }
   
   /** A short label for status chips: "Chrome 150–154 API". */
   export function describeSupport(support: HtmlCanvasSupport) {
     if (support.version === "none") return "Not supported";
     return { "155+": "Chrome 155+ API", "150-154": "Chrome 150–154 API", legacy: "Pre-150 API" }[support.version];
   }
   /* eslint-enable @typescript-eslint/no-explicit-any */

   Show all 63 lines

   lib/html-canvas/sync-geometry.ts

   import { getHtmlCanvasSupport } from "@/lib/html-canvas/support";
   
   /* eslint-disable @typescript-eslint/no-explicit-any -- the API is not in lib.dom yet */
   
   /**
    * Tells the browser where an element is drawn, so clicks, text selection, focus rings and screen
    * reader focus land on the drawn pixels. `canvasTransform` maps the element's own CSS px (origin at
    * its top-left) to the canvas's CSS px, and may include perspective; it is converted to the device
    * pixels the API expects.
    *
    * Canvas children are laid out at the canvas's top-left corner (they do not stack), so the transform
    * is the element's whole position.
    *
    * For non-affine warps (ripples, curls, cloth), pass the closest affine approximation and calm the
    * warp while an input inside the element has focus.
    */
   export function syncElementGeometry(canvas: HTMLCanvasElement, element: HTMLElement, canvasTransform: DOMMatrix) {
     const c = canvas as any;
     const support = getHtmlCanvasSupport();
     const cssWidth = canvas.clientWidth || canvas.width;
     const cssHeight = canvas.clientHeight || canvas.height;
     // The API works in device pixels on both sides (the element's rendered image and the canvas's backing
     // store), so the CSS-px matrix is conjugated by the pixel ratio: S · M · S⁻¹.
     const toBackingStore = new DOMMatrix().scale(canvas.width / cssWidth, canvas.height / cssHeight, 1);
     const pixels = toBackingStore.multiply(canvasTransform).multiply(toBackingStore.inverse());
     try {
       if (support.version === "155+" && typeof c.updateElementGeometry === "function") {
         c.updateElementGeometry(element, { canvasTransform: pixels });
         return;
       }
       if (typeof c.getElementTransform === "function") {
         element.style.transform = c.getElementTransform(element, pixels).toString();
         return;
       }
     } catch {
       // Fall through to the manual mapping below.
     }
     // Manual: children sit at the canvas origin, so the CSS-px transform applies as is.
     element.style.transformOrigin = "0 0";
     element.style.transform = canvasTransform.toString();
   }
   
   /** Clears geometry set by `syncElementGeometry` or a legacy `drawElement2D`. */
   export function clearElementGeometry(element: HTMLElement) {
     element.style.transform = "";
     element.style.transformOrigin = "";
   }
   
   /** A CSS-px perspective matrix, like `perspective(d)` in CSS. */
   export function perspective(distance: number) {
     return new DOMMatrix([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -1 / distance, 0, 0, 0, 1]);
   }
   /* eslint-enable @typescript-eslint/no-explicit-any */

   Show all 53 lines

   lib/html-canvas/texture-webgl.ts

   import { getHtmlCanvasSupport } from "@/lib/html-canvas/support";
   
   /* eslint-disable @typescript-eslint/no-explicit-any -- the API is not in lib.dom yet */
   
   /** A WebGL texture that holds a live element's pixels. */
   export interface ElementTexture {
     texture: WebGLTexture;
     /** Natural size of the last upload, in CSS px. */
     width: number;
     height: number;
     /** Allocated size on 155+, where the storage is reused until the element resizes. */
     allocated: { width: number; height: number } | null;
   }
   
   /** Creates an empty, linearly filtered, edge-clamped texture for `uploadElementTexture`. */
   export function createElementTexture(gl: WebGL2RenderingContext): ElementTexture {
     const texture = gl.createTexture();
     if (!texture) throw new Error("Could not create a texture");
     gl.bindTexture(gl.TEXTURE_2D, texture);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
     return { texture, width: 0, height: 0, allocated: null };
   }
   
   /**
    * Uploads an element's current rendering into `target`. Call it from the canvas `paint` event or on
    * resize, never every frame. Returns false when the element could not be uploaded.
    *
    * - 155+: measures with `captureElementImage`, allocates once with `texImage2D(…, null)` (again only
    *   when the size changes), then copies with `texElementSubImage2D`.
    * - 150–154: `texElementImage2D(target, internalformat, element)`.
    * - legacy: `texElementImage2D(target, level, internalformat, format, type, element)`.
    */
   export function uploadElementTexture(gl: WebGL2RenderingContext, target: ElementTexture, element: Element) {
     const g = gl as any;
     const support = getHtmlCanvasSupport();
     const box = element.getBoundingClientRect();
     const html = element as HTMLElement;
     // Layout size, unaffected by the CSS transform used for hit-testing.
     const width = html.offsetWidth || box.width;
     const height = html.offsetHeight || box.height;
     if (!width || !height) return false;
     gl.bindTexture(gl.TEXTURE_2D, target.texture);
     try {
       if (support.version === "155+" && typeof g.texElementSubImage2D === "function") {
         const canvas = gl.canvas as any;
         let natural = { width, height };
         if (typeof canvas.captureElementImage === "function") {
           const image = canvas.captureElementImage(element);
           natural = { width: image.width, height: image.height };
           image.close?.();
         }
         if (!target.allocated || target.allocated.width !== natural.width || target.allocated.height !== natural.height) {
           gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, natural.width, natural.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
           target.allocated = natural;
         }
         g.texElementSubImage2D(gl.TEXTURE_2D, 0, 0, 0, element);
       } else if (support.version === "legacy") {
         g.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, element);
       } else if (typeof g.texElementImage2D === "function") {
         g.texElementImage2D(gl.TEXTURE_2D, gl.RGBA8, element);
       } else {
         return false;
       }
     } catch {
       return false;
     }
     target.width = width;
     target.height = height;
     return true;
   }
   /* eslint-enable @typescript-eslint/no-explicit-any */

   Show all 74 lines

   lib/html-canvas/use-html-canvas.ts

   "use client";
   
   import { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
   import { useReducedMotion } from "motion/react";
   import { drawableCanvasAttributes, prepareDrawableCanvas, requestCanvasPaint } from "@/lib/html-canvas/setup";
   import { getHtmlCanvasSupport, NO_SUPPORT, supportsContext, type HtmlCanvasSupport } from "@/lib/html-canvas/support";
   
   export type HtmlCanvasMode = "auto" | "native" | "fallback";
   type ContextType = "2d" | "webgl2";
   type ContextFor<C extends ContextType> = C extends "2d" ? CanvasRenderingContext2D : WebGL2RenderingContext;
   
   export interface HtmlCanvasFrame<C extends ContextType> {
     ctx: ContextFor<C>;
     canvas: HTMLCanvasElement;
     /** Canvas size in CSS px. */
     width: number;
     height: number;
     /** Device pixels per CSS px used for the backing store (capped). */
     dpr: number;
     /** Seconds since the hook started. */
     time: number;
     /** Seconds since the previous render. */
     delta: number;
     /** Why this render happened: drawn elements repainted, the canvas resized, or an animation frame. */
     reason: "paint" | "resize" | "frame" | "request";
     /** Elements that repainted (from the paint event), when known. */
     changed: readonly Element[];
   }
   
   export interface UseHtmlCanvasOptions<C extends ContextType> {
     /** Context to draw with. */
     context: C;
     /** "auto" uses the API when available, "fallback" never does, "native" requires it. @default "auto" */
     mode?: HtmlCanvasMode;
     /** Run a render every frame while true (e.g. while a ripple is fading). Paused offscreen and in hidden tabs. */
     animating?: boolean;
     /** Called once per context (again after a lost context is restored). Return a cleanup. */
     setup?: (ctx: ContextFor<C>, canvas: HTMLCanvasElement) => void | (() => void);
     /** Draws a frame. Upload element textures only when `reason` is "paint" or "resize". */
     render: (frame: HtmlCanvasFrame<C>) => void;
     /** Highest device pixel ratio for the backing store. @default 2 */
     maxDpr?: number;
     /** Context attributes for WebGL. */
     contextAttributes?: WebGLContextAttributes;
   }
   
   export interface HtmlCanvasController {
     /** True when the canvas path is active; render the fallback DOM otherwise. */
     native: boolean;
     /** What the browser supports (none on the server and during hydration). */
     support: HtmlCanvasSupport;
     /** Ref for the <canvas>. */
     canvasRef: (canvas: HTMLCanvasElement | null) => void;
     /** Spread onto the <canvas> so it lays out and paints its children from the first layout. */
     canvasProps: Record<string, string>;
     /** Asks for one more render (and a browser paint event where supported). */
     invalidate: () => void;
   }
   
   const noop = () => () => {};
   
   /**
    * Ties the HTML-in-Canvas adapter together: decides native vs. fallback (never during SSR or
    * hydration, never under reduced motion), prepares the canvas, renders on the canvas `paint` event
    * and on resize, runs a frame loop only while `animating`, pauses offscreen and in hidden tabs,
    * recovers from a lost WebGL context and cleans up on unmount.
    */
   export function useHtmlCanvas<C extends ContextType>({
     context,
     mode = "auto",
     animating = false,
     setup,
     render,
     maxDpr = 2,
     contextAttributes,
   }: UseHtmlCanvasOptions<C>): HtmlCanvasController {
     const hydrated = useSyncExternalStore(
       noop,
       () => true,
       () => false,
     );
     const reduceMotion = useReducedMotion();
     const support = hydrated ? getHtmlCanvasSupport() : NO_SUPPORT;
     const [failed, setFailed] = useState(false);
     const native = hydrated && !failed && mode !== "fallback" && !reduceMotion && supportsContext(support, context);
   
     // The element lives in a ref (it is mutated: size, attributes); the counter re-runs the effect when it changes.
     const canvasEl = useRef<HTMLCanvasElement | null>(null);
     const [canvasVersion, setCanvasVersion] = useState(0);
     const canvasRef = useCallback((el: HTMLCanvasElement | null) => {
       if (canvasEl.current === el) return;
       canvasEl.current = el;
       setCanvasVersion((v) => v + 1);
     }, []);
     const renderRef = useRef(render);
     const setupRef = useRef(setup);
     const animatingRef = useRef(animating);
     useLayoutEffect(() => {
       renderRef.current = render;
       setupRef.current = setup;
       animatingRef.current = animating;
     });
     const kick = useRef<(reason: HtmlCanvasFrame<C>["reason"]) => void>(() => {});
   
     useEffect(() => {
       const canvas = canvasEl.current;
       if (!native || !canvas) return;
       prepareDrawableCanvas(canvas);
       const ctx = canvas.getContext(context, context === "webgl2" ? { alpha: true, premultipliedAlpha: true, antialias: true, ...contextAttributes } : undefined) as ContextFor<C> | null;
       if (!ctx) {
         // Defer so the state change happens outside the effect body.
         const t = window.setTimeout(() => setFailed(true), 0);
         return () => window.clearTimeout(t);
       }
       let cleanupSetup: void | (() => void);
       let ready = false;
       const runSetup = () => {
         try {
           cleanupSetup = setupRef.current?.(ctx, canvas);
           ready = true;
         } catch (error) {
           console.error(error);
           ready = false;
           window.setTimeout(() => setFailed(true), 0);
         }
       };
       runSetup();
   
       const start = performance.now();
       // Frame time is measured between loop frames only, so the first frame after idling has a normal step.
       let lastFrame = 0;
       let size = { width: 0, height: 0, dpr: 1 };
       let visible = true;
       let frame = 0;
       let changed: readonly Element[] = [];
   
       const draw = (reason: HtmlCanvasFrame<C>["reason"]) => {
         if (!ready || !size.width || !size.height) return;
         const now = performance.now();
         const delta = reason === "frame" && lastFrame ? Math.min(1 / 20, (now - lastFrame) / 1000) : reason === "frame" ? 1 / 60 : 0;
         if (reason === "frame") lastFrame = now;
         try {
           renderRef.current({ ctx, canvas, width: size.width, height: size.height, dpr: size.dpr, time: (now - start) / 1000, delta, reason, changed });
         } catch (error) {
           console.error(error);
         }
         changed = [];
       };
   
       const loop = () => {
         frame = 0;
         if (!visible || document.hidden || !animatingRef.current) {
           lastFrame = 0;
           return;
         }
         draw("frame");
         frame = requestAnimationFrame(loop);
       };
       const ensureLoop = () => {
         if (!frame && visible && !document.hidden && animatingRef.current) frame = requestAnimationFrame(loop);
       };
       kick.current = (reason) => {
         draw(reason);
         ensureLoop();
       };
   
       const resize = () => {
         const rect = canvas.getBoundingClientRect();
         const dpr = Math.min(maxDpr, window.devicePixelRatio || 1);
         const width = Math.max(1, Math.round(rect.width));
         const height = Math.max(1, Math.round(rect.height));
         if (width === size.width && height === size.height && dpr === size.dpr) return;
         size = { width, height, dpr };
         canvas.width = Math.round(width * dpr);
         canvas.height = Math.round(height * dpr);
         draw("resize");
         requestCanvasPaint(canvas);
       };
       const resizeObserver = new ResizeObserver(resize);
       resizeObserver.observe(canvas);
       resize();
   
       const onPaint = (event: Event) => {
         changed = ((event as Event & { changedElements?: Element[] }).changedElements ?? []) as Element[];
         draw("paint");
         ensureLoop();
       };
       canvas.addEventListener("paint", onPaint);
   
       const io = new IntersectionObserver(([entry]) => {
         visible = entry?.isIntersecting ?? true;
         ensureLoop();
       });
       io.observe(canvas);
       const onVisibility = () => ensureLoop();
       document.addEventListener("visibilitychange", onVisibility);
   
       const onLost = (event: Event) => {
         event.preventDefault();
         ready = false;
         cancelAnimationFrame(frame);
         frame = 0;
       };
       const onRestored = () => {
         runSetup();
         draw("resize");
         requestCanvasPaint(canvas);
       };
       canvas.addEventListener("webglcontextlost", onLost);
       canvas.addEventListener("webglcontextrestored", onRestored);
   
       requestCanvasPaint(canvas);
   
       return () => {
         cancelAnimationFrame(frame);
         resizeObserver.disconnect();
         io.disconnect();
         canvas.removeEventListener("paint", onPaint);
         canvas.removeEventListener("webglcontextlost", onLost);
         canvas.removeEventListener("webglcontextrestored", onRestored);
         document.removeEventListener("visibilitychange", onVisibility);
         kick.current = () => {};
         if (typeof cleanupSetup === "function") cleanupSetup();
       };
       // contextAttributes and maxDpr are read once per canvas.
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [native, canvasVersion, context]);
   
     // Start or stop the loop when `animating` flips.
     useEffect(() => {
       if (animating) kick.current("frame");
     }, [animating]);
   
     const invalidate = useCallback(() => {
       kick.current("request");
       if (canvasEl.current) requestCanvasPaint(canvasEl.current);
     }, []);
   
     return { native, support, canvasRef, canvasProps: drawableCanvasAttributes(support), invalidate };
   }

   Show all 240 lines

   lib/motion.ts

   import type { Transition, Variants } from "motion/react";
   
   /** Durations in seconds. */
   export const duration = {
     instant: 0.1,
     quick: 0.18,
     base: 0.28,
     slow: 0.45,
   } as const;
   
   /** Cubic-bezier curves. */
   export const ease = {
     /** Entering, UI response. */
     out: [0.22, 1, 0.36, 1],
     /** Moving on screen. */
     inOut: [0.65, 0, 0.35, 1],
     /** Sheets and the mobile menu. */
     drawer: [0.32, 0.72, 0, 1],
   } as const;
   
   /** Everyday UI: presses, icon swaps, popovers and modals. Exits run at `exitFactor` of the enter. */
   export const ui = {
     press: { scale: 0.96, duration: 0.12 },
     icon: { type: "spring", duration: 0.3, bounce: 0 },
     popover: { duration: 0.18, ease: ease.out },
     modal: { duration: 0.24, ease: ease.out },
     exitFactor: 0.6,
   } as const;
   
   /** Once-per-visit motion on the landing page: hero letters, the reel and the afterimage. */
   export const kinetic = {
     heroLetter: { duration: 0.6, ease: ease.out },
     /** Delay per letter, eased so the wave slows toward the end. */
     heroStep: 0.035,
     reelSwap: { type: "spring", duration: 0.5, bounce: 0.1 },
     /** Two afterimages: lag in seconds and opacity of each. */
     ghost: { lag: [0.04, 0.09], opacity: [0.14, 0.06] },
   } as const;
   
   /** Spring presets. */
   export const spring = {
     snappy: { type: "spring", stiffness: 500, damping: 30 },
     smooth: { type: "spring", stiffness: 260, damping: 26 },
     bouncy: { type: "spring", stiffness: 300, damping: 15 },
   } as const satisfies Record<string, Transition>;
   
   /** Stagger between siblings, in seconds (0.03–0.06). */
   export const stagger = {
     tight: 0.03,
     base: 0.045,
     loose: 0.06,
   } as const;
   
   /** Blur + fade + y-offset. Falls back to a plain fade under reduced motion. */
   export function enterVariants(reduceMotion?: boolean | null, y = 8): Variants {
     if (reduceMotion) {
       return {
         hidden: { opacity: 0 },
         visible: { opacity: 1, transition: { duration: duration.base } },
         exit: { opacity: 0, transition: { duration: duration.quick } },
       };
     }
     return {
       hidden: { opacity: 0, y, filter: "blur(4px)" },
       visible: {
         opacity: 1,
         y: 0,
         filter: "blur(0px)",
         transition: { duration: duration.base, ease: ease.out },
       },
       exit: {
         opacity: 0,
         y: -y / 2,
         filter: "blur(4px)",
         transition: { duration: duration.quick, ease: ease.out },
       },
     };
   }
   
   /** Scale 0.96 → 1 for popovers, menus and dialogs. */
   export function overlayVariants(reduceMotion?: boolean | null): Variants {
     if (reduceMotion) {
       return {
         hidden: { opacity: 0 },
         visible: { opacity: 1, transition: { duration: duration.quick } },
         exit: { opacity: 0, transition: { duration: duration.instant } },
       };
     }
     return {
       hidden: { opacity: 0, scale: 0.96, filter: "blur(2px)" },
       visible: {
         opacity: 1,
         scale: 1,
         filter: "blur(0px)",
         transition: { duration: duration.quick, ease: ease.out },
       },
       exit: {
         opacity: 0,
         scale: 0.96,
         filter: "blur(2px)",
         transition: { duration: duration.instant + 0.02, ease: ease.out },
       },
     };
   }
   
   /** Parent variants that stagger their children in. */
   export function staggerVariants(gap: number = stagger.base, delayChildren = 0): Variants {
     return {
       hidden: {},
       visible: { transition: { staggerChildren: gap, delayChildren } },
       exit: { transition: { staggerChildren: gap / 2, staggerDirection: -1 } },
     };
   }

   Show all 113 lines

3. Copy the source

   components/ui/cloth-banner/cloth-banner.tsx

   "use client";
   
   import { useEffect, useRef, useState, type ReactNode } from "react";
   import { AnimatePresence, motion, useReducedMotion } from "motion/react";
   import { X } from "lucide-react";
   import { cn } from "@/lib/utils";
   import { duration, ease } from "@/lib/motion";
   import { createGrid, createProgram, drawMesh, PROJECT_GLSL, type Mesh, type Program } from "@/lib/html-canvas/gl";
   import { createElementTexture, uploadElementTexture, type ElementTexture } from "@/lib/html-canvas/texture-webgl";
   import { syncElementGeometry } from "@/lib/html-canvas/sync-geometry";
   import { useHtmlCanvas, type HtmlCanvasMode } from "@/lib/html-canvas/use-html-canvas";
   
   export interface ClothBannerProps {
     /** The announcement: text and links. */
     children: ReactNode;
     /** Colors of the bar. @default "dark" */
     variant?: "dark" | "brand" | "light";
     /** Show a close button. @default true */
     dismissible?: boolean;
     /** Called when the close button is pressed. */
     onDismiss?: () => void;
     /** Wind strength, 0–2. @default 1 */
     wind?: number;
     /** "auto" uses HTML-in-Canvas when available, "fallback" never does. @default "auto" */
     rendering?: HtmlCanvasMode;
     /** Called when the rendering mode is known. */
     onModeChange?: (native: boolean) => void;
     /** Classes for the root. */
     className?: string;
   }
   
   /** Room around the bar for the cloth to billow into, in px. */
   const PAD = 14;
   
   const VERT = /* glsl */ `#version 300 es
   in vec2 a_pos;
   uniform vec2 u_size;
   uniform vec2 u_offset;
   uniform float u_time;
   uniform float u_amp;
   uniform float u_gust;
   out vec2 v_uv;
   out float v_shade;
   ${PROJECT_GLSL}
   
   float wave(vec2 p) {
     // Pinned at the left edge; travelling waves grow toward the free end.
     float pin = smoothstep(0.0, 0.55, p.x);
     float w = sin(p.x * 9.0 - u_time * 2.6 + p.y * 1.4) * 0.6 + sin(p.x * 17.0 - u_time * 4.1 + p.y * 3.0) * 0.25;
     return w * pin * (u_amp + u_gust);
   }
   
   void main() {
     vec2 p = a_pos;
     float z = wave(p) * 14.0;
     // The cloth also ripples slightly up and down, more at the free end.
     float dy = cos(p.x * 9.0 - u_time * 2.6) * 2.2 * smoothstep(0.0, 0.6, p.x) * (u_amp + u_gust);
     vec2 css = u_offset + p * u_size + vec2(0.0, dy);
     // Shade from the slope along x: folds facing the light brighten, the others darken.
     float eps = 0.01;
     float slope = (wave(p + vec2(eps, 0.0)) - wave(p - vec2(eps, 0.0))) / (2.0 * eps);
     v_shade = clamp(slope * 0.045, -0.22, 0.22);
     v_uv = a_pos;
     // Simple perspective around the canvas center: nearer folds grow a little.
     vec2 center = u_canvas * 0.5;
     float s = 600.0 / (600.0 - z);
     gl_Position = projectCss(vec4(center + (css - center) * s, 0.0, 1.0));
   }`;
   
   const FRAG = /* glsl */ `#version 300 es
   precision highp float;
   in vec2 v_uv;
   in float v_shade;
   uniform sampler2D u_tex;
   out vec4 outColor;
   void main() {
     vec4 c = texture(u_tex, v_uv);
     c.rgb += c.a * v_shade;
     outColor = c;
   }`;
   
   const VARIANTS = {
     dark: "bg-foreground text-background [&_a]:text-background",
     brand: "bg-primary text-white [&_a]:text-white",
     light: "bg-surface-2 text-foreground border border-border [&_a]:text-foreground",
   };
   
   /**
    * An announcement bar (real text, link and close button) drawn through HTML-in-Canvas on gently waving
    * cloth, pinned at the left and lit by its folds. Moving the pointer across it gusts the wind;
    * hovering the link or the close button calms it so they are easy to hit. Without the API, the bar
    * sways with a subtle CSS skew (still under reduced motion).
    */
   export function ClothBanner({ children, variant = "dark", dismissible = true, onDismiss, wind = 1, rendering = "auto", onModeChange, className }: ClothBannerProps) {
     const reduceMotion = useReducedMotion();
     const barRef = useRef<HTMLDivElement>(null);
     const [open, setOpen] = useState(true);
     const [height, setHeight] = useState<number | null>(null);
     const motionState = useRef({ amp: 1, target: 1, gust: 0, lastX: 0, time: 0 });
     const gl = useRef<{ program: Program; mesh: Mesh; texture: ElementTexture } | null>(null);
   
     const { native, canvasRef, canvasProps } = useHtmlCanvas({
       context: "webgl2",
       mode: rendering,
       animating: open,
       setup: (ctx) => {
         gl.current = { program: createProgram(ctx, VERT, FRAG), mesh: createGrid(ctx, 48, 6), texture: createElementTexture(ctx) };
         return () => {
           if (!gl.current) return;
           ctx.deleteProgram(gl.current.program.program);
           ctx.deleteTexture(gl.current.texture.texture);
           gl.current = null;
         };
       },
       render: ({ ctx, canvas, width, height: h, reason, delta }) => {
         const g = gl.current;
         const bar = barRef.current;
         if (!g || !bar) return;
         if (reason !== "frame" || !g.texture.width) {
           uploadElementTexture(ctx, g.texture, bar);
           // The flat bar is the closest affine shape to the cloth; calm waves keep it close.
           syncElementGeometry(canvas, bar, new DOMMatrix().translate(0, PAD));
         }
         const m = motionState.current;
         m.time += delta;
         m.amp += (m.target * Math.max(0, Math.min(2, wind)) - m.amp) * (1 - Math.exp(-delta * 4));
         m.gust *= Math.exp(-delta * 1.6);
         ctx.viewport(0, 0, canvas.width, canvas.height);
         ctx.clearColor(0, 0, 0, 0);
         ctx.clear(ctx.COLOR_BUFFER_BIT);
         ctx.enable(ctx.BLEND);
         ctx.blendFunc(ctx.ONE, ctx.ONE_MINUS_SRC_ALPHA);
         ctx.useProgram(g.program.program);
         const { u } = g.program;
         ctx.uniform2f(u("u_canvas"), width, h);
         ctx.uniform2f(u("u_size"), g.texture.width || width, g.texture.height || h - PAD * 2);
         ctx.uniform2f(u("u_offset"), 0, PAD);
         ctx.uniform1f(u("u_time"), m.time);
         ctx.uniform1f(u("u_amp"), m.amp * 0.5);
         ctx.uniform1f(u("u_gust"), m.gust);
         ctx.activeTexture(ctx.TEXTURE0);
         ctx.bindTexture(ctx.TEXTURE_2D, g.texture.texture);
         ctx.uniform1i(u("u_tex"), 0);
         drawMesh(ctx, g.mesh);
       },
     });
   
     useEffect(() => onModeChange?.(native), [native, onModeChange]);
   
     useEffect(() => {
       const el = barRef.current;
       if (!native || !el) return;
       const observer = new ResizeObserver(() => setHeight(el.offsetHeight + PAD * 2));
       observer.observe(el);
       return () => observer.disconnect();
     }, [native, open]);
   
     const onPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
       const m = motionState.current;
       const interactive = (event.target as HTMLElement).closest("a, button");
       m.target = interactive ? 0.12 : 1;
       // Fast sideways moves gust the cloth.
       const dx = Math.abs(event.clientX - m.lastX);
       m.lastX = event.clientX;
       if (!interactive) m.gust = Math.min(0.9, m.gust + dx * 0.004);
     };
     const onPointerLeave = () => {
       motionState.current.target = 1;
     };
   
     const dismiss = () => {
       setOpen(false);
       onDismiss?.();
     };
   
     const bar = (
       <div
         ref={barRef}
         role="region"
         aria-label="Announcement"
         className={cn("flex min-h-12 w-full items-center gap-3 rounded-xl px-4 py-2.5 text-[13px] [&_a]:font-semibold [&_a]:underline [&_a]:underline-offset-4", VARIANTS[variant])}
       >
         <div className="min-w-0 flex-1">{children}</div>
         {dismissible ? (
           <button type="button" onClick={dismiss} aria-label="Dismiss announcement" className="relative after:absolute after:-inset-1 grid size-8 shrink-0 cursor-pointer place-items-center rounded-full opacity-80 outline-none transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current">
             <X className="size-4" aria-hidden="true" />
           </button>
         ) : null}
       </div>
     );
   
     return (
       <AnimatePresence initial={false}>
         {open ? (
           <motion.div
             key="banner"
             exit={{ opacity: 0, transition: { duration: duration.quick, ease: ease.out } }}
             className={cn("w-full max-w-2xl", className)}
             onPointerMove={native ? onPointerMove : undefined}
             onPointerLeave={native ? onPointerLeave : undefined}
           >
             {native ? (
               <div className="relative -my-[14px]" style={{ height: height ?? undefined }}>
                 <canvas ref={canvasRef} {...canvasProps} className="absolute inset-0 block size-full">
                   {bar}
                 </canvas>
               </div>
             ) : (
               <motion.div
                 style={{ transformOrigin: "0% 50%" }}
                 animate={reduceMotion ? undefined : { skewY: [0, 0.5, 0, -0.5, 0], rotate: [0, 0.15, 0, -0.15, 0] }}
                 transition={reduceMotion ? undefined : { duration: 6, repeat: Infinity, ease: "easeInOut" }}
               >
                 {bar}
               </motion.div>
             )}
           </motion.div>
         ) : null}
       </AnimatePresence>
     );
   }

   Show all 221 lines

Usage#

import { ClothBanner } from "@/components/ui/cloth-banner/cloth-banner";

<ClothBanner onDismiss={() => hideBanner()}>
  Version 0.3.0 is out. <a href="/changelog">Read the changelog</a>
</ClothBanner>

API reference#

Accessibility#

• The bar is a labelled region of real text, a real link and a close button named "Dismiss announcement"; they keep their tab order and focus rings.
• Hovering the link or the close button calms the cloth so they hold still under the pointer. The bar's geometry is synced to the flat cloth, which the calmed waves stay close to.
• With reduced motion the bar is completely still; without the HTML-in-Canvas API it sways with a subtle CSS skew.