MOTION & PHYSICS

Kinetic Typography Hover

A high-fidelity, interactive hover layout component designed for editorial portfolios and creative agencies.

#motion#typescript

Source on GitHub

components/flourish/kinetic-hover.tsx

LIVE PREVIEWOpen in new tab

Next.js 16 • React 19 • TypeScript•Tailwind CSS v4

Registry Slug:kinetic-hover

QUICKSTART

Make it yours.

Install the source, then customize it in your project.

REGISTRY ITEM

PACKAGE MANAGER

pnpm dlx shadcn@latest add https://flourish-ui.vercel.app/r/kinetic-hover.json

Adds source to components/flourish/

01Dependencies 1 packages

framer-motion

02Usage example Next.js / React

import { KineticHover } from "@/components/flourish/kinetic-hover"

// Add this image to public/images/project.jpg.
const items = [{
  id: "project-1", number: "01", title: "A project",
  category: "Web", description: "A short project description.",
  image: "/images/project.jpg", color: "#d86b43",
}]

export default function Page() {
  return <KineticHover items={items} />
}

First install? Run pnpm dlx shadcn@latest init once, then add this component. You get editable source code in your project.

EXPLORE MORE

More in Motion & Physics

Browse Motion & Physics

Bloom Select Text Garden

Bloom Select turns highlighted text into playful, animated flowers, adding an expressive moment to reading and writing interfaces.

Velocity Spring Dock System

A breathtaking, highly interactive layout animation system featuring MacOS dock mechanics, seamless masonry grid toggles, and perfect physical spring interpolation. Built for the Flourish UI component library.