8080.AI
DesignReqsTasksUser FlowArchitecture
Log inSign up for free

opal-video

byMonish Raj

Recreate this hero section exactly. Here are the complete specifications: Video Background: Full-screen background video, absolutely positioned, covering the entire viewport (object-cover) Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260403_050628_c4e32401-fab4-4a27-b7a8-6e9291cd5959.mp4 Autoplay, loop, muted, playsInline NO dark overlay, NO gradient overlay, NO semi-transparent layer on top of the video. The video plays raw with no dimming whatsoever. Typography (CRITICAL - must be applied globally): Import the Google Font Inter via a <link> tag in index.html: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> Set the body font-family in CSS to: 'Inter', sans-serif Apply -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale on the body Also extend the Tailwind config to set fontFamily: { sans: ['Inter', 'sans-serif'] } so all Tailwind font-sans usage picks up Inter automatically Navbar: Wrapped in horizontal page padding: px-6 md:px-12 lg:px-16 with pt-6 top padding The navbar bar itself uses the .liquid-glass class and has rounded-xl, px-4 py-2, flex layout with items-center justify-between Left: Logo text "VEX" - text-2xl font-semibold tracking-tight Center (hidden on mobile, visible md+): Links "Story", "Investing", "Building", "Advisory" - text-sm, gap-8, hover transitions to gray-300 Right: "Start a Chat" button - bg-white text-black px-6 py-2 rounded-lg text-sm font-medium, hover to gray-100 Hero Content (Bottom of viewport): Container: same horizontal padding as navbar, flex column filling remaining height, content pushed to bottom with flex-1 flex flex-col justify-end, bottom padding pb-12 lg:pb-16 On large screens: 2-column grid (lg:grid lg:grid-cols-2 lg:items-end) Left Column - Main content: Heading: "Shaping tomorrow\nwith vision and action." (literal line break between "tomorrow" and "with") Responsive sizes: text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-normal, mb-4 Inline style: letterSpacing: '-0.04em' Character-by-character entrance animation: Each character starts at opacity: 0 and translateX(-18px), then transitions to opacity: 1 and translateX(0). Each character gets a staggered delay calculated as: (lineIndex * lineLength * charDelay) + (charIndex * charDelay) where charDelay = 30ms. The whole animation starts after 200ms initial delay. Each character transition is 500ms. Spaces render as \u00A0 (non-breaking space) Subheading: "We back visionaries and craft ventures that define what comes next." text-base md:text-lg text-gray-300 mb-5 Fade-in animation: starts at 800ms delay, 1000ms duration Buttons row: flex-wrap with gap-4 "Start a Chat" - bg-white text-black px-8 py-3 rounded-lg font-medium "Explore Now" - liquid-glass border border-white/20 text-white px-8 py-3 rounded-lg font-medium, hover transitions to white bg + black text Fade-in animation: starts at 1200ms delay, 1000ms duration Right Column - Tag: Aligned to bottom-right on large screens (flex items-end justify-start lg:justify-end) Glass card: liquid-glass border border-white/20 px-6 py-3 rounded-xl Text: "Investing. Building. Advisory." - text-lg md:text-xl lg:text-2xl font-light Fade-in animation: starts at 1400ms delay, 1000ms duration Liquid Glass CSS (place in global CSS): .liquid-glass { background: rgba(0, 0, 0, 0.4); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .liquid-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.3) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } FadeIn component: A wrapper that starts with opacity: 0 and transitions to opacity: 1 after a configurable delay (ms) using a setTimeout + React state. Transition duration is also configurable. Uses inline transitionDuration style and Tailwind's transition-opacity class. AnimatedHeading component: Splits text by \n into lines, then each line into individual characters. Each character is an inline-block <span> with CSS transitions on opacity and transform (translateX). Animation triggers via React state after the initial delay. Color scheme: Black background, white text, gray-300 for secondary text, white/20 for borders. No purple, no indigo. Stack: React + TypeScript, Tailwind CSS, Vite. No extra UI libraries needed. Icons from lucide-react if needed (none currently used in the hero).

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document

System Requirements Document (SRD)

Project Name: opal-video

1. Introduction

The opal-video project is a cutting-edge platform designed to deliver a visually stunning and highly interactive user experience. This document outlines the system requirements for the hero section of the project, focusing on its video background, typography, animations, and layout. The goal is to create a seamless, premium interface that aligns with Monish Raj's vision for a sophisticated and modern design.

This SRD is tailored for implementation in India (IN), considering locale-specific preferences, time zones, and user expectations. The hero section will serve as the first impression for users, setting the tone for the rest of the platform.

Page 1 of 7

2. System Overview

The opal-video hero section is designed to captivate users with a full-screen video background, dynamic animations, and a clean, modern layout. The system will leverage React, TypeScript, and Tailwind CSS for a responsive and performant implementation. Key features include:

  • A raw, undimmed video background that plays seamlessly across devices.
  • Typography and animations that emphasize elegance and energy.
  • A liquid-glass effect for UI elements, enhancing the visual appeal.
  • Responsive design ensuring optimal viewing on all screen sizes.

This hero section will act as the gateway to the platform, showcasing the project's commitment to innovation and user-centric design.

Page 2 of 7

3. Functional Requirements

The following story points outline the functional requirements for the hero section:

  • As a User, I should see a full-screen video background that plays automatically, loops, and is muted.
  • As a User, I should experience smooth character-by-character entrance animations for the main heading.
  • As a User, I should see a responsive layout that adjusts seamlessly across devices.
  • As a User, I should interact with a navbar featuring a liquid-glass effect and responsive links.
  • As a User, I should see buttons and text that fade in with staggered animations.
  • As a User, I should experience a visually appealing liquid-glass effect on specific UI elements.

4. User Personas

1. General User

  • Description: Visitors to the platform who interact with the hero section.
  • Goals: To be impressed by the design, navigate easily, and engage with the platform.
Page 3 of 7

2. Admin

  • Description: Platform administrators responsible for maintaining the hero section.
  • Goals: To ensure the hero section functions correctly and aligns with the overall platform design.

5. Visuals Colors and Theme

Unique Color Palette for opal-video:

  • Background: #000000 (Black)
  • Surface: #1A1A1A (Dark Gray)
  • Text: #FFFFFF (White)
  • Accent: #F5F5F5 (Light Gray)
  • Muted: #4D4D4D (Muted Gray)

This palette emphasizes a sleek, modern aesthetic with high contrast for readability and visual impact.

6. Signature Design Concept

Hero Section: "Dynamic Vision in Motion"

The hero section will feature a full-screen video background that immerses users in a raw, undimmed visual experience. The video will play seamlessly, covering the entire viewport with no overlays or distractions.

Page 4 of 7

Key Features:

  1. Typography Animation:

    • The main heading, "Shaping tomorrow\nwith vision and action," will animate character-by-character. Each character will fade in and slide into place with a staggered delay, creating a dynamic entrance effect.

  2. Liquid-Glass Navbar:

    • The navbar will have a liquid-glass effect, appearing as a semi-transparent, blurred surface. It will include responsive links and a call-to-action button ("Start a Chat").

  3. Responsive Layout:

    • On larger screens, the hero content will split into two columns. The left column will feature the animated heading and subheading, while the right column will display a liquid-glass tag card.

  4. Interactive Buttons:

    • Buttons will have hover effects, transitioning smoothly between states.

  5. Animations:

    • All elements will fade in with staggered delays, creating a cohesive and engaging experience.

This design concept ensures the hero section is not only visually stunning but also interactive and memorable.

Page 5 of 7

7. Non-Functional Requirements

  • Performance: The hero section must load within 2 seconds on a standard 4G connection.
  • Responsiveness: The layout must adapt seamlessly to all screen sizes, from mobile to desktop.
  • Accessibility: Ensure WCAG 2.1 compliance for text contrast and keyboard navigation.
  • Cross-Browser Compatibility: Support for the latest versions of Chrome, Firefox, Safari, and Edge.

8. Tech Stack

Frontend

  • React (Web)
  • Tailwind CSS
  • TypeScript

Backend

  • Not applicable for the hero section.

AI Tools

  • Not applicable for the hero section.
Page 6 of 7

Local Orchestration

  • Docker
  • docker-compose

9. Assumptions and Constraints

  • The video background will be hosted on a reliable CDN to ensure fast loading times.
  • The hero section will not include any additional overlays or gradients.
  • Typography and animations will follow the specifications exactly as outlined.
  • The project will use the specified tech stack without introducing additional libraries.

10. Glossary

  • Hero Section: The topmost section of a webpage, designed to capture user attention.
  • Liquid-Glass Effect: A semi-transparent, blurred background effect applied to UI elements.
  • Viewport: The visible area of a webpage on a user's device.
  • WCAG: Web Content Accessibility Guidelines, a standard for web accessibility.
Page 7 of 7

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Admin Login: Sign In
Dashboard: View Hero
Dashboard: Check Animations
Settings: Update Video
Settings: Save Changes
Hero: Preview Section

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Admin Login: Sign In
Dashboard: View Hero
Dashboard: Check Animations
Settings: Update Video
Settings: Save Changes
Hero: Preview Section