import React from "react" import type { ReactElement } from "react" import { useState, useEffect, useRef } from "react" import { Scene, PerspectiveCamera, WebGLRenderer, QuadraticBezierCurve3, Vector3, TubeGeometry, ShaderMaterial, Mesh, AdditiveBlending, DoubleSide, Color, PlaneGeometry, } from "three" const Input = React.forwardRef>( ({ className, type, ...props }, ref) => { return ( ) }, ) Input.displayName = "Input" const Button = React.forwardRef>( ({ className, children, ...props }, ref) => { return ( ) }, ) Button.displayName = "Button" export function WaitlistExperience(): ReactElement { const mountRef = useRef(null) const sceneRef = useRef() const rendererRef = useRef() const animationIdRef = useRef() const [email, setEmail] = useState("") const [isSubmitted, setIsSubmitted] = useState(false) const [timeLeft, setTimeLeft] = useState({ days: 225, hours: 23, minutes: 17, seconds: 58, }) // Three.js background effect - Enhanced with more visible beams useEffect(() => { if (!mountRef.current) return // Scene setup const scene = new Scene() sceneRef.current = scene const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) const renderer = new WebGLRenderer({ antialias: true, alpha: true, }) rendererRef.current = renderer renderer.setSize(window.innerWidth, window.innerHeight) renderer.setClearColor(0xf8fafc, 0) // Set alpha to 0 for transparency mountRef.current.appendChild(renderer.domElement) // Create multiple curved light geometries for a more pronounced effect const curves = [ new QuadraticBezierCurve3( new Vector3(-15, -3, 0), new Vector3(0, 1, 0), new Vector3(12, -2, 0) // Reduced right side extension ), new QuadraticBezierCurve3( new Vector3(-14, -2, 0), new Vector3(1, 2, 0), new Vector3(10, -1, 0) // Reduced right side extension ), new QuadraticBezierCurve3( new Vector3(-16, -4, 0), new Vector3(-1, 0.5, 0), new Vector3(11, -3, 0) // Reduced right side extension ) ] // Create lighter and more subtle colors const colors = [ new Color(0x88C1FF), // Very light blue new Color(0xA0D2FF), // Lighter blue new Color(0x78B6FF), // Soft blue ] // Create multiple light beams for a more pronounced effect curves.forEach((curve, index) => { // Create tube geometry for the light streak const tubeGeometry = new TubeGeometry(curve, 200, index === 0 ? 0.8 : 0.6, 32, false) // Create gradient material with lighter colors const vertexShader = ` varying vec2 vUv; varying vec3 vPosition; void main() { vUv = uv; vPosition = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } ` const fragmentShader = ` uniform float time; uniform vec3 color; varying vec2 vUv; varying vec3 vPosition; void main() { // Base color with reduced intensity vec3 baseColor = color; // Add subtle pulsing effect float pulse = sin(time * 1.5) * 0.1 + 0.9; // Create gradient effect from left to right float gradient = smoothstep(0.0, 1.0, vUv.x); // Center glow effect float glow = 1.0 - abs(vUv.y - 0.5) * 2.0; glow = pow(glow, 2.0); // Fade at the ends - more pronounced on the right float fade = 1.0; if (vUv.x > 0.7) { fade = 1.0 - smoothstep(0.7, 1.0, vUv.x); } else if (vUv.x < 0.2) { fade = smoothstep(0.0, 0.2, vUv.x); } // Final color with reduced intensity vec3 finalColor = baseColor * gradient * pulse * glow * fade * 0.8; gl_FragColor = vec4(finalColor, glow * fade * 0.6); } ` const material = new ShaderMaterial({ vertexShader, fragmentShader, uniforms: { time: { value: 0 }, color: { value: colors[index] } }, transparent: true, blending: AdditiveBlending, side: DoubleSide, }) const lightStreak = new Mesh(tubeGeometry, material) lightStreak.rotation.z = index * 0.15 scene.add(lightStreak) }) // Add background gradient plane with reduced opacity const backgroundGeometry = new PlaneGeometry(80, 55) // Smaller size to avoid right edge const backgroundMaterial = new ShaderMaterial({ vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` varying vec2 vUv; uniform float time; void main() { // Create a very light blue gradient from left to right vec3 blue1 = vec3(0.7, 0.85, 1.0); vec3 blue2 = vec3(0.6, 0.8, 1.0); vec3 blue3 = vec3(0.5, 0.75, 0.95); // Animate the gradient slightly float timeFactor = sin(time * 0.2) * 0.05; // Create gradient effect vec3 color = mix(blue1, blue2, vUv.x + timeFactor); color = mix(color, blue3, vUv.x * 0.3 + timeFactor); // Add subtle noise for texture float noise = fract(sin(dot(vUv, vec2(12.9898, 78.233))) * 43758.5453) * 0.05; // Add blur effect using smoothstep float blur = smoothstep(0.0, 0.2, vUv.x) * (1.0 - smoothstep(0.8, 1.0, vUv.x)); gl_FragColor = vec4(color + noise, 0.15 * blur); } `, uniforms: { time: { value: 0 } }, transparent: true, side: DoubleSide, }) const background = new Mesh(backgroundGeometry, backgroundMaterial) background.position.z = -5 background.position.x = -2 // Shift slightly left to avoid right edge scene.add(background) // Position camera slightly to the left to avoid showing the right edge camera.position.z = 7 camera.position.y = -0.8 camera.position.x = -1 // Animation loop const animate = () => { animationIdRef.current = requestAnimationFrame(animate) const time = Date.now() * 0.001 // Update all materials with time scene.traverse((object) => { if (object instanceof Mesh && object.material instanceof ShaderMaterial) { if (object.material.uniforms.time) { object.material.uniforms.time.value = time } } }) // Very subtle rotation for dynamic effect scene.children.forEach((child, index) => { if (child instanceof Mesh && index < curves.length) { child.rotation.z = Math.sin(time * 0.1 + index * 0.5) * 0.05 } }) renderer.render(scene, camera) } animate() // Handle resize const handleResize = () => { if (!camera || !renderer) return camera.aspect = window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight) } window.addEventListener("resize", handleResize) // Cleanup return () => { window.removeEventListener("resize", handleResize) if (animationIdRef.current) { cancelAnimationFrame(animationIdRef.current) } if (mountRef.current && renderer.domElement) { mountRef.current.removeChild(renderer.domElement) } renderer.dispose() // Dispose of all geometries and materials scene.traverse((object) => { if (object instanceof Mesh) { object.geometry.dispose() if (object.material instanceof ShaderMaterial) { object.material.dispose() } } }) } }, []) // Countdown timer useEffect(() => { const timer = setInterval(() => { setTimeLeft((prev) => { let { days, hours, minutes, seconds } = prev if (seconds > 0) { seconds-- } else if (minutes > 0) { minutes-- seconds = 59 } else if (hours > 0) { hours-- minutes = 59 seconds = 59 } else if (days > 0) { days-- hours = 23 minutes = 59 seconds = 59 } return { days, hours, minutes, seconds } }) }, 1000) return () => clearInterval(timer) }, []) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (email) { setIsSubmitted(true) console.log("Email submitted:", email) } } const features = ["Features", "Pricing", "Beta", "Launch", "Updates", "Community"] return (

{/* Three.js Background */}

{/* Content Layer */}

{/* Top Navigation */}

Mysh.ai

{features.map((feature, index) => ( ))}

{/* Waitlist Card */}

{!isSubmitted ? ( <>

Join the waitlist

Get early access to Mysh.ai - the intelligent
AI collaboration platform built for modern teams

~ 20+ Teams already joined

{timeLeft.days}

days

{timeLeft.hours}

hours

{timeLeft.minutes}

minutes

{timeLeft.seconds}

seconds

) : (

You're on the list!

We'll notify you when we launch. Thanks for joining!

)}

) }