proNew157 lines · framer-motion

Scroll Pinned Device

The camera does the work. A full-width, pinned scroll section where a single device mockup is held in place while the camera orbits and zooms through a 3D rotation, and annotation pins fade in and out pointing at different parts of the screen along the way.

Use it for: A focused product tour of one screen, calling out two or three details in sequence instead of swapping full screenshots.
Themes: Light + dark
License: Commercial use

Live

The camera does the work

One screen, looked at from every angle

Live status

Cost this run

Needs approval

tsx

"use client";

import * as React from "react";
import { motion, useMotionValue, useReducedMotion, useScroll, useTransform, type MotionValue } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width scroll section: a single device mockup is pinned in place while
 * the "camera" orbits and zooms into it, and annotation pins fade in and
 * out pointing at different parts of the screen along the way.
 */

export interface DeviceAnnotation {
  label: string;
  top: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→The device's 3D rotation and scale come from a single section-scoped scroll progress value mapped through a CSS perspective.
→Each annotation pin has its own progress window (start/end) and fades and scales in independently as progress passes through it.
→At rest, the device sits at a sensible default angle and whichever pins fall inside the current progress window are visible — never all three at once, never none when progress is mid-way.
→autoplay sweeps progress back and forth on a timer when there's no scroll to drive it.
→prefers-reduced-motion holds the device at a neutral angle with no rotation animation.

Accessibility

✓The device mockup's inner UI is decorative and aria-hidden; the section's real content is the eyebrow, heading and annotation labels.
✓Annotation labels are plain text with an icon dot, not colour-only cues.
✓Honours prefers-reduced-motion by disabling the 3D rotation.
✓Honours prefers-reduced-motion.