Sponsor Flip
A clearly labelled sponsor card in a corner that flips in 3D between sponsors, and collapses to a dot.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Hover pauses it, one click collapses it to a dot for the session, and the dot reopens it. An onEvent callback reports impressions and clicks so you can bill sponsors. Links use rel="sponsored".
Installation
$ npm i @guetix/sponsor-flip
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
vanilla.ts · any framework
import { sponsorFlip } from "@guetix/sponsor-flip";
sponsorFlip({
sponsors: [{ name: "Acme", line: "Deploy in 30s", href: "https://acme.example", color: "#4ade80" }],
onEvent: (type, s) => fetch("/api/sponsor-stats", { method: "POST", body: JSON.stringify({ type, s: s.name }) }),
});Usage
example.tsx
import { SponsorFlip } from "@/components/guetix/sponsor-flip";
<SponsorFlip fullscreen corner="bottom-left" every={6} />Newsletters & blogs with sponsorsOpen-source sitesCommunity pages
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| sponsors | { name; line; href; color; logo? }[] | — | Rotation. |
| every | number | 6 | Seconds per sponsor. |
| corner | "bottom-left" | … | "bottom-left" | Position. |
| onEvent | ("impression" | "click", s) => void | — | Reporting hook. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Always labelled 'Sponsored'; pauses on hover/focus; minimise/restore buttons.