# Floating Dandelion Seeds and Pollen A shadcn/ui block from the [@weinc](https://we.inc/components?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/weinc/floating-dandelion-seeds-and-pollen-particle-background). - Page, with a live preview: https://shadcn.exchange/r/weinc/floating-dandelion-seeds-and-pollen-particle-background - Screenshot: https://shadcn.exchange/shot/weinc/floating-dandelion-seeds-and-pollen-particle-background/light.png - Registry item: https://we.inc/r/floating-dandelion-seeds-and-pollen-particle-background.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/floating-dandelion-seeds-and-pollen-particle-background.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Files ### `components/we-inc/floating-dandelion-seeds-and-pollen-particle-background.tsx` ```tsx import { useEffect, useRef } from "react"; // Floating Dandelion Seeds and Pollen: a canvas 2D particle background behind a small hero. // Sprites are drawn once to small offscreen canvases, motion is scaled by frame // time, the loop stops off screen, and reduced motion gets one settled frame. // Values worth changing: const SEEDS_PER_MPX = 30; // dandelion seeds per million pixels const POLLEN_PER_MPX = 200; // tiny pollen grains per million pixels const FILAMENT = "255,253,244"; // seed fluff colour, as r,g,b (backlit, so near white) const POLLEN = "255,232,150"; // pollen colour const BREEZE = 1; // 0.5 for a still afternoon, 2 for a windy one const WARMUP = 120; // frames simulated before the first paint type Ptr = { x: number; y: number; on: boolean }; type Scene = { update: (dt: number, t: number) => void; draw: (c: CanvasRenderingContext2D, t: number) => void }; function glow(size: number, rgb: string, stops: number[][]): HTMLCanvasElement { const c = document.createElement("canvas"); c.width = c.height = size; const g = c.getContext("2d")!; const r = size / 2; const grd = g.createRadialGradient(r, r, 0, r, r, r); for (const [o, a] of stops) grd.addColorStop(o, `rgba(${rgb},${a})`); g.fillStyle = grd; g.fillRect(0, 0, size, size); return c; } function mount(canvas: HTMLCanvasElement, root: HTMLElement): () => void { const ctx = canvas.getContext("2d"); if (!ctx) return () => {}; const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const ptr: Ptr = { x: -1e4, y: -1e4, on: false }; let w = 0, h = 0, t = 0, last = 0, raf = 0, seen = true; let scene: Scene | null = null; const fit = () => { const r = canvas.getBoundingClientRect(); if (scene && Math.abs(r.width - w) < 1 && Math.abs(r.height - h) < 1) return; const dpr = Math.min(window.devicePixelRatio || 1, 1.5); w = Math.max(1, r.width); h = Math.max(1, r.height); canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); scene = createScene(w, h, ptr); for (let i = 0; i < WARMUP; i++) { t += 1 / 30; scene.update(1 / 30, t); } scene.draw(ctx, t); }; const frame = (now: number) => { const dt = Math.min(0.05, Math.max(0, (now - last) / 1000)); last = now; t += dt; if (scene) { scene.update(dt, t); scene.draw(ctx, t); } raf = requestAnimationFrame(frame); }; const run = () => { cancelAnimationFrame(raf); raf = 0; if (!still && seen && !document.hidden) { last = performance.now(); raf = requestAnimationFrame(frame); } }; const ro = new ResizeObserver(fit); ro.observe(canvas); const io = new IntersectionObserver((es) => { seen = es[es.length - 1].isIntersecting; run(); }); io.observe(canvas); document.addEventListener("visibilitychange", run); fit(); run(); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", run); }; } function createScene(w: number, h: number, _ptr: Ptr): Scene { const area = (w * h) / 1e6; // One dandelion seed drawn once: a fan of fine filaments on a thin stalk. const seed = document.createElement("canvas"); seed.width = seed.height = 96; const q = seed.getContext("2d")!; q.translate(48, 40); q.lineCap = "round"; const crown = q.createRadialGradient(0, -6, 0, 0, -6, 34); crown.addColorStop(0, `rgba(${FILAMENT},0.32)`); crown.addColorStop(1, `rgba(${FILAMENT},0)`); q.fillStyle = crown; q.fillRect(-40, -40, 80, 70); for (let i = 0; i < 44; i++) { const a = Math.PI * 0.82 + (i / 43) * Math.PI * 1.36; const len = 20 + Math.random() * 12; q.strokeStyle = `rgba(${FILAMENT},0.7)`; q.lineWidth = 0.7; q.beginPath(); q.moveTo(0, 0); q.quadraticCurveTo(Math.cos(a) * len * 0.5, Math.sin(a) * len * 0.4, Math.cos(a) * len, Math.sin(a) * len * 0.8); q.stroke(); q.fillStyle = `rgba(${FILAMENT},0.9)`; q.beginPath(); q.arc(Math.cos(a) * len, Math.sin(a) * len * 0.8, 1.1, 0, 7); q.fill(); } q.strokeStyle = "rgba(120,104,70,0.6)"; q.lineWidth = 0.9; q.beginPath(); q.moveTo(0, 0); q.lineTo(0, 30); q.stroke(); q.fillStyle = "rgba(110,86,52,0.85)"; q.beginPath(); q.ellipse(0, 34, 1.6, 4.5, 0, 0, 7); q.fill(); const grain = glow(16, POLLEN, [[0, 1], [0.35, 0.8], [1, 0]]); const seeds = Array.from({ length: Math.max(6, Math.round(area * SEEDS_PER_MPX)) }, () => ({ x: Math.random() * w, y: Math.random() * h, z: Math.random(), r: (Math.random() - 0.5) * 0.6, s: Math.random() * 99, })); const dust = Array.from({ length: Math.min(500, Math.round(area * POLLEN_PER_MPX)) }, () => ({ x: Math.random() * w, y: Math.random() * h, z: Math.random(), s: Math.random() * 99, })); let breeze = 0; return { update(dt, t) { breeze = (14 + Math.sin(t * 0.17) * 10 + Math.sin(t * 0.43) * 6) * BREEZE; for (const p of seeds) { const k = 0.4 + p.z; p.x += (breeze + Math.sin(t * 0.6 + p.s) * 8) * k * dt; p.y += (-6 + Math.sin(t * 0.9 + p.s * 1.3) * 10) * k * dt; p.r = Math.sin(t * 0.5 + p.s) * 0.35; if (p.x > w + 80) { p.x = -80; p.y = Math.random() * h; } if (p.y < -80) p.y = h + 80; else if (p.y > h + 80) p.y = -80; } for (const p of dust) { p.x += (breeze * 0.7 + Math.sin(t + p.s) * 6) * (0.3 + p.z) * dt; p.y += Math.cos(t * 0.8 + p.s) * 7 * dt - 2 * dt; if (p.x > w + 10) p.x = -10; if (p.y < -10) p.y = h + 10; else if (p.y > h + 10) p.y = -10; } }, draw(c, t) { c.clearRect(0, 0, w, h); for (const p of dust) { const s = 1.5 + p.z * 3.5; c.globalAlpha = (0.25 + p.z * 0.5) * (0.6 + 0.4 * Math.sin(t * 2 + p.s)); c.drawImage(grain, p.x - s / 2, p.y - s / 2, s, s); } for (const p of seeds) { const s = 34 + p.z * 70; c.globalAlpha = p.z > 0.85 ? 0.6 : 0.7 + p.z * 0.3; c.save(); c.translate(p.x, p.y); c.rotate(p.r); c.drawImage(seed, -s / 2, -s * 0.42, s, s); c.restore(); } c.globalAlpha = 1; }, }; } export default function FloatingDandelionSeedsPollen() { const canvasRef = useRef(null); const rootRef = useRef(null); useEffect(() => { if (!canvasRef.current || !rootRef.current) return; return mount(canvasRef.current, rootRef.current); }, []); return (
); } ```