Dig Hole
Interactive video-based website with scroll-triggered reveals and smooth transitions. Features a cinematic video background with menu items that reveal content on scroll.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| heroVideo | string | https://www.pexels.com/download/video/857131/ | The main hero background video. |
| storyVideo | string | https://www.pexels.com/download/video/4434242/ | The video for the story reveal section. |
| accentColor | string | #bc9cff | The primary accent color for logos and UI elements. |
| menuItems | VideoData[] | undefined | Custom menu items with title, label, and video source. |
When to Use
Perfect for cinematic agency landing pages, deep-scroll portfolios, and Next.js sites that want a mysterious 'Dig Hole' aesthetic. Now supports custom hero/story videos and accent colors via props.
Best Practices
Use high-fidelity video assets for the `heroVideo` and `storyVideo` props. Pair the `accentColor` with your brand's primary palette for a cohesive experience. Optimize for performance by using efficient CSS mask-image transforms.
Why This Component Matters
Scroll-triggered video reveals create a sense of physical 'Digging' and exploration. This production-ready UI template helps you build an interface that feels architectural and cinematic, leaving a lasting impression on tech-savvy clients.
FAQ
QHow does the 'Hole' work?
The component uses localized CSS masks that 'expand' based on scroll depth, revealing the cinematic video background underneath the menu layer.
QCan I use my own videos?
Yes, use the `heroVideo` and `storyVideo` props to pass any direct video URL. It is optimized to remain smooth while the reveal animations triggers across the scroll-axis.
QHow do I customize the menu?
The `menuItems` prop allows you to pass an array of video data objects, each with its own title and reveal video for a fully custom navigation experience.
Related Components
404 Page
Interactive 404 error page featuring a cinematic canyon layout with multi-layered parallax cacti. Built with SVG and custom mouse-tracking logic for a deep 3D immersive feel.
Image Slider
Advanced WebGL-powered image slider with shader-based transitions. Features smooth displacement effects, Three.js rendering, and GSAP animations for seamless image transitions.
Flower Animation
Beautiful CSS-based flower animation with multiple blooming flowers, glowing lights, and smooth animations. Features intricate CSS animations creating a mesmerizing night garden effect.