Docs·OPOS Hover

OPOS Hover

Thumbnail strip with a giant headline that swaps to each quote word on hover, plus a lagging cursor dot and bubble.

Installation

$pnpm dlx shadcn@latest add @spiderui/opos-hover

Requires gsap with SplitText. Manual install: pnpm add gsap

Usage

Hover interaction inspired by OPOS. Each thumbnail is one word of a quote; the giant title swaps with per-character GSAP reveals.

API Reference

PropTypeDefault
itemsThumbnails and the word revealed on hover.
QuoteWordItem[]DEFAULT_QUOTE_WORDS
titleDefault headline shown when nothing is hovered.
stringWeee!
accentColorActive word colour, thumbnail outline, and cursor bubble.
string#ff2d1f
titleClassNameOverride headline size (useful in narrow preview panes).
string—
headerOptional slot above the thumbnail strip (e.g. nav or branding).
ReactNode—
classNameClasses on the root container.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
SHOW
ME
THE
MONEY

Weee!

SHOW

ME

THE

MONEY

import { OposHover } from "@/components/ui/opos-hover"
const quoteWords = [
  { id: 1, name: "SHOW", image: "/quotes/show.jpg" },
  { id: 2, name: "ME", image: "/quotes/me.jpg" },
  { id: 3, name: "THE", image: "/quotes/the.jpg" },
  { id: 4, name: "MONEY", image: "/quotes/money.jpg" },
]

export default function Page() {
  return <OposHover items={quoteWords} title="Weeeeeeeee!" />
}