Device Mockup 29 - Phone in drifting stardustPro
A centered phone floats in a field of tiny stardust particles that drift upward and twinkle around it, with every dot placed deterministically so the server and client render match. Use it for dreamy app launches, wellness or sleep products, and calm hero sections.
About Device Mockup 29
A centered phone floats in a field of tiny stardust particles that drift upward and twinkle around it, with every dot placed deterministically so the server and client render match. Use it for dreamy app launches, wellness or sleep products, and calm hero sections.
Device Mockup 29 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 97 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
- phone
- particles
- stardust
- hero
- ambient
- loop
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add device-mockup-29Dependencies installed automatically: lucide-react, motion.
Uses: button, device-frame, reveal, use-reduced-motion, utils.
Usage
import DeviceMockup29 from "@/components/blocks/device-mockup-29"
export default function Page() {
return <DeviceMockup29 />
}