Getting Started
Components
TweenCommand Palette
Search for a command to run...
TweenSearch for a command to run...
import { HoverPreviewList } from "@/registry/tween/hover-preview-list"
export function HoverPreviewListDemo() {
return (
<div className="w-full [font-family:ui-sans-serif,system-ui,sans-serif]">
<HoverPreviewList />
</div>
)
}
import { HoverPreviewList } from "@/components/ui/hover-preview-list"<HoverPreviewList
items={[
{ label: "Native Instruments,", img: "/hover-preview-list/img1.jpg" },
{ label: "Sonos.", img: "/hover-preview-list/img12.jpg" },
]}
/>The list is rendered with mix-blend-mode: difference over a centered preview pane. Hovering a name builds an image wrapper in that pane and eases its clip-path open from a center point to a full rectangle on a custom "hop" ease, while the image itself fades in and settles from a 1.25 scale. Moving off the name fades the image out and removes it. Because the type is difference-blended, it stays legible against both the background and whatever image is revealed behind it.
When prefers-reduced-motion: reduce is set, the image appears and disappears instantly with no clip or scale animation.
| Prop | Type | Default | Description |
|---|---|---|---|
items | HoverPreviewItem[] | 12 defaults | Each is { label, img, alt? }; hovering label reveals img. |
heading | React.ReactNode | "Trusted Us" | Small label shown above the list. |
background | string | "#ffffff" | Pane background (difference blend is relative to this). |
className | string | — | Extra classes on the outer container. |