Agency Kinetic
An award-style studio landing page: kinetic headline, cursor-following project previews, marquee and a giant CTA.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Letters lean and stretch away from the cursor, hovering a project row reveals a preview that follows the pointer and tilts with its speed, and the huge outlined “Let’s talk” fills with color on hover.
Installation
$ npx shadcn@latest add https://guetix.com/r/agency-kinetic.json
Uses the shadcn CLI. It creates components/guetix/agency-kinetic.tsx and installs nothing else.
Usage
example.tsx
import { AgencyKinetic } from "@/components/guetix/agency-kinetic";
export default function Example() {
return <AgencyKinetic />;
}
Studios & agenciesDesigner portfoliosCreative brands
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| studio | string | — | Studio name. |
| projects | { name; kind; year; gradient }[] | — | Work list. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Headline keeps a plain aria-label; project rows are real links.