Device Spotlight

Present a project on desktop and phone mockups that straighten as you scroll past the description.

Dependencies: gsap
Size: 317 lines
Controls: 8 controls

example.tsx

1import { DeviceSpotlight } from "@/components/onycx/device-spotlight";23export default function Example() {4  return (5    <DeviceSpotlight6      eyebrow={"A closer look / ARCLIGHT"}7      heading={"One idea."}8      headingMuted={"Every touchpoint."}9      body={"A product story with a point of view.\nFrom a bold first impression\nto the smallest interaction."}10      brand={"ARCLIGHT"}11      screenColor={"#ed4923"}12      background={"#d0d1d2"}13      scrub={1.15}14    />15  );16}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/device-spotlight.json

1 · Dependencies

npm install gsap

2 · Copy the source

components/onycx/device-spotlight.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the device-spotlight.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
eyebrow / micro	string	—	'+' eyebrow and the uppercase note on the top row (the note hides at 800px).
heading / headingMuted / body	string	—	Heading with a grey second line and a short paragraph; newlines become breaks.
image / imageAlt / phoneAlt	string	"/media/architecture-hero/arclight.webp"	Product photograph shown in both screens.
barLabel / brand / navLine / screenHeading / screenAccent / footnote	string	—	Mock desktop site; the accent line is italic serif.
phoneCaption / phoneSub / phoneAction	string	—	Mock phone layout.
stamp / disciplines / linkLabel / linkHref	string / string[]	—	Rotated stamp with the mark, the bottom discipline row and its text link.
screenColor / accent / background / ink	string	"#ed4923" / "#ff4d27" / "#d0d1d2" / "#1b1c1d"	Desktop screen, phone panel and focus colour, section surface and text.
scrub	number	1.15	Seconds of smoothing for both devices.

Behaviour notes

The default image points to /media/architecture-hero/arclight.webp in this site; replace it with your own.
The device copy inside the mockups is aria-hidden; only the photographs carry alt text.
Reduced motion drops the pinned height and the 3D poses, leaving the devices flat in a single 100svh frame. The heading rises 52px (32px under 600px) on entry.
Layouts step at 1100, 800 and 540px exactly like the original; above 1800px every size grows with the viewport.

Pattern origin

The dark design studio template's ARCLIGHT spotlight: a 180svh (min 1250px) #d0d1d2 section with a sticky 100svh frame, a 1400px-perspective scene where the desktop goes from rotationX 22, rotationY −14, rotationZ −7, y 110, scale .87 to rotationZ −2, y −20 and the phone from 15 / 18 / 10, y 160 to rotationY −8, rotationZ 6, y −35, between 'top 85%' and 'bottom bottom' at scrub 1.15.

#sticky#scroll#mockup#device#3d#gsap#case-study