Russian Website
Cinematic scroll-triggered website with Russian terminal-style boot sequence and sliced image reveals. Features GSAP ScrollTrigger animations and dramatic text reveals.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| bootSequence | string[] | BOOT_SEQUENCE | Array of strings for the terminal preloader typing animation. |
| images | ImageItem[] | IMAGES | Array of images for the sliced image gallery. |
| heroTitle | React.ReactNode | ПУТЬ ВОИНА | Main hero title text or element. |
| heroSubtitle | string | Scroll to Initialize | Subtitle above the main hero text. |
| aboutText | string | ABOUT_TEXT | Text for the about/mission statement section. |
| features | FeatureItem[] | FEATURES | Array of feature objects containing title and description. |
| footerTitle | string | КОНЕЦ СВЯЗИ | Large title used in the footer. |
| footerSubtitle | string | SYSTEM SHUTDOWN | Subtitle used in the footer. |
When to Use
Perfect for edgy brands, experimental studios, and Next.js portfolios that want a dramatic 'Russian Site' aesthetic. Use this full-page template for a high-intensity experience with terminal boot sequences and sliced-image reveal animations.
Best Practices
Maintain consistent spacing within your design system by using it for aggressive brand storytelling. Follow React best practices by pairing it with bold, technical typography. Optimize for performance by using GSAP ScrollTrigger for the slice offsets.
Why This Component Matters
Dramatic scroll-sequences communicate power, mystery, and structural honesty. This production-ready UI template helpsคุณ build an interface that feels authoritative and solid, breaking the 'standard' web layout rules.
FAQ
QWhat is the 'Boot Sequence'?
The component features an animated terminal CLI-style intro overlay that simulates a technical system startup before revealing the branding.
QHow were the slices made?
The reveal uses alternating CSS clip-paths and horizontal offsets driven by ScrollTrigger to 'deconstruct' and re-assemble images as you scroll.
QIs the text editable?
Yes, all data readouts and branding labels are fully configurable to match your project's specific terminology and technical theme.
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.
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.
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.