Installation & details
Gooey Cursor Effect by Codrops. A gooey cursor background effect with SVG filters and CSS blend modes. Try the live React demo, inspect the original source, and install from PODIE.
React · Tailwind CSS · MIT license · Original GitHub source
Added to PODIE · Catalog updated · Page updated
Installation and usage
The published examples target React 19 and Tailwind CSS 4. See the recorded installation tests and their limits; verify compatibility in your own project.
This original Codrops demo runs inside a self-contained React iframe. The installation includes the original GitHub source and image assets. Set autoplay={false} for manual interaction. Bundled libraries retain their own licenses.
01 — Set up your project
First component? Initialize shadcn once.
pnpm dlx shadcn@latest init02 — Install the component
pnpm dlx shadcn@latest add https://podie.dev/r/codrops--gooey-cursor.json03 — Add it to your interface
Import the component from the path created by the installer.
'use client';
import EffectGooeyCursor from '@/components/codrops/gooey-cursor';
export default function Demo() {
return (
<div className="expanded-demo" data-demo-id="codrops--gooey-cursor">
<EffectGooeyCursor className="codrops-preview" />
</div>
);
}
Example styling
These styles belong to the demo wrapper. Add them to your stylesheet to reproduce this example.
.expanded-demo { position:relative; display:flex; align-items:center; justify-content:center; width:360px; max-width:100%; min-height:180px; padding:15px; isolation:isolate }
.demo-stack { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px }
.demo-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border, #e5e5e5); border-radius:8px; background:var(--muted, #f5f5f5); color:var(--foreground, #171717); padding:10px 16px; font-size:13px; cursor:pointer }
.demo-action:hover { background:var(--accent, #eee) }
.demo-tile { padding:16px 22px; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:12px; color:var(--foreground, #171717); font-size:15px }
.demo-art { display:flex; align-items:center; justify-content:center; min-height:140px; padding:30px; width:280px; max-width:100%; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:16px; text-align:center; font-size:25px; letter-spacing:-.7px; color:var(--foreground, #171717) }
.demo-art.h-full { height:100%; min-height:0 }
.demo-gradient { position:relative; background:linear-gradient(145deg,#b6c7d1,#d5bcd6 50%,#e2d5bb); border-radius:16px; padding:20px; color:#222 }
.demo-gradient .demo-tile { background:#ffffff48 }
.demo-scene { position:relative; width:360px; height:260px; max-width:100%; overflow:hidden; border-radius:12px }
.demo-scene-label { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; font-size:25px; line-height:1.3; font-weight:500; letter-spacing:-.7px; z-index:1; pointer-events:none }
.demo-dot { display:block; width:60px; height:60px; border-radius:50%; background:var(--foreground, #171717) }
.expanded-demo:has(.codrops-preview) { width:100%; max-width:none; height:100%; padding:0 }
.codrops-preview { width:100%; height:100%; border:0; border-radius:inherit }Dependencies and distribution
No additional npm dependencies are declared. The CLI installs declared dependencies. React is a project prerequisite; scenes may include bundled libraries with their own notices.
By Codrops · MIT license. Original component source and license included.
Choosing and integrating this component
PODIE source review ·
Where it fits
A decorative cursor treatment within a scene. The isolated scene owns its cursor and pointer listeners; it does not replace the cursor across your host site.
Integration boundary
React wrapper with an isolated iframe scene. Use autoplay for the demonstration, or disable it for direct pointer interaction.
Checks before shipping
Touch devices have no persistent hover cursor. Keep every essential action available as a normal control.
Recorded verification
Included in the October 1, 2026 production sample: npm, pnpm, Yarn and Bun installation, TypeScript checking and a Vite build passed in four separate React 19.2.6 / Tailwind CSS 4.2.1 projects, with all 20 sampled entries installed together. Read the method and limitations.
No component-specific mobile performance or assistive-technology pass is claimed here. Test the final page, including its content, theme and application logic.
Reviewed source identity
Registry SHA-256: 8d09fa9e2e406cfba7e50bb8593fa75fb2f34f1e8f0632bf0a8c13719a733e32
Entry file: components/codrops/gooey-cursor/index.tsx. 18 files in the registry payload.
Consider also: Ideas for Image Motion Trail Animations.