No reviews yet — be the first to review this product.
Explore compatible stacks, practical use cases and relevant comparisons.
Creators may embed this optional badge in a repository or project page. It points directly to this product; no backlink is required, and the supplied link is nofollow by default.
More production-ready assets in the same category.
A 3D card that tilts toward the cursor and casts a soft "comet" glare that follows the pointer across its surface. Wrap any content; zero dependencies, reduced-motion aware. Composable CometCard wrapper + a ready-made invite demo.
A premium "cutout corner" brand/feature card with an autoplaying muted looping video media band, a notched inset label, a corner badge, a 2x2 feature grid and a CTA. Drop-in, dark-mode and reduced-motion friendly, lucide-react only.
A premium animated-gradient button with a bright light orbiting the edge, four variants, five sizes, loading/disabled states and an under-glow — self-installing keyframes (no tailwind.config edits), accessible, zero required props.
Aurora Button is a premium animated-gradient button for React 19 + TypeScript + Tailwind CSS. A bright light orbits the edge over an elevated surface (CSS transform animation — visible in every browser and on any background). Self-installing: it injects its own keyframes once on mount, so there are no tailwind.config or global CSS edits. Palette via --ab-1…--ab-5 tokens with premium defaults; rebrand any button inline. Four variants (gradient / inverted / outline / solid / ghost) and five sizes including icon. Built-in loading state with spinner + aria-busy, disabled, focus-visible ring and active press; asChild (Radix Slot) renders it as a link; prefers-reduced-motion pauses all motion. Strict TypeScript, accessible (WCAG AA).
An interactive 3D card that tilts toward your cursor with CSS perspective, while inner items lift on the Z axis (translateZ) for real depth. Zero dependencies, dark mode, and tilt disabled under reduced-motion. Composable CardContainer / CardBody / CardItem API.
Requirements
So it renders exactly like the preview.
Project setup
Zero dependencies — just Tailwind CSS. Copy the single file and compose with <CardContainer>, <CardBody> and <CardItem translateZ={n}>. The default export is a ready-made demo card. Works in light/dark; the tilt is automatically disabled when the user prefers reduced motion.Updated Jun 30, 2026
Computed from real data — the same states coding agents read in this product's manifest.
Cancel anytime