Device Mockup 26 - Laptop with VHS tracking distortionPro

A monochrome laptop screen plays back like a worn tape: tracking bands roll down the picture, the frame jitters, and an on-screen PLAY label and running timecode sit in the corner. Use it for throwback product videos, archive features or a moody retro launch section.

About Device Mockup 26

A monochrome laptop screen plays back like a worn tape: tracking bands roll down the picture, the frame jitters, and an on-screen PLAY label and running timecode sit in the corner. Use it for throwback product videos, archive features or a moody retro launch section.

Device Mockup 26 is a device mockup block for React and Tailwind CSS, included in Chocolate UI Pro with motion animations that respect reduced-motion settings. It ships as 102 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.

  • mockup
  • laptop
  • vhs
  • retro
  • monochrome
  • tracking
  • loop

Installation

  1. Set up your project with npx chocolateui init and npx chocolateui login (see the installation guide).
  2. Run the Chocolate UI CLI:
npx chocolateui add device-mockup-26

Dependencies installed automatically: motion.

Uses: device-frame, reveal, use-reduced-motion, utils.

Usage

import DeviceMockup26 from "@/components/blocks/device-mockup-26"

export default function Page() {
  return <DeviceMockup26 />
}

FAQ