Ai Blob Warp

A circular avatar with an animated warp shader. It pulses gently and pauses when off-screen or when reduced motion is preferred. Use it to display user avatars with dynamic visual effects.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/ai-blob-warp

npx layro-cli add @nolly-studio/ai-blob-warp

npx layro-cli add @nolly-studio/ai-blob-warp

bunx layro-cli add @nolly-studio/ai-blob-warp

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import { forwardRef, useCallback, useRef, type ComponentProps } from "react"
import { Warp, type WarpProps } from "@paper-design/shaders-react"
import { motion, useInView, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

const DEFAULT_WARP: Partial<WarpProps> = {
  /** Same stops as the main glow in `halo-search.tsx` (90deg linear-gradient). */
  colors: ["#ff0080", "#7928ca", "#00d4ff", "#0070f3"],
  distortion: 0.25,
  height: 720,
  proportion: 0.54,