✦ClaudeDesign

Glassmorphism SaaS landing (React + Tailwind v4)

A production-ready dark glassmorphism landing page with HLS video, motion and a logo marquee.

Loading the original X post…

A production-ready dark glassmorphism landing page with HLS video, motion and a logo marquee.

The prompt

✦Claude (AI builder)

1	Build a production-ready, responsive landing page using React, Tailwind CSS v4, and Vite. The design should feature a high-end, dark-mode "glassmorphism" aesthetic with specific purple/pink gradients.
2
3	1. Tech Stack & Libraries:
4
5	Use hls.js for video streaming.
6	Use motion/react (formerly Framer Motion) for animations.
7	Use react-use-measure for sizing logic.
8	Use clsx and tailwind-merge for class management.
9	Use lucide-react for standard icons (if needed), but I will provide custom SVG paths for specific UI elements.
10	2. Global Styling:
11
12	Background: Dark/Black (#010101).
13	Primary Gradient: A diagonal gradient used for accents: from-[#FA93FA] via-[#C967E8] to-[#983AD6].
14	Typography: Modern sans-serif, center-aligned hero text.
15	3. Hero Section Components:
16
17	Announcement Pill:
18	A pill-shaped top badge.
19	Background: Semi-transparent dark (bg-[rgba(28,27,36,0.15)]) with a subtle border.
20	Icon: A "Zap" icon inside a gradient-filled box with a glow effect.
21	Text: "Used by founders. Loved by devs." in light grey.
22	Main Headline (H1):
23	Large text (responsive sizing: 48px mobile to 80px desktop).
24	Text: "Your Vision" on line 1, "Our Digital Reality." on line 2.
25	Style: Text should have a gradient fill (White to Purple/Pink).
26	Subheadline:
27	Text: "We turn bold ideas into modern designs that don’t just look amazing, they grow your business fast."
28	Color: text-white/80.
29	CTA Button:
30	"Book a 15-min call" text.
31	Rounded full button with a white background and black text.
32	Includes a circle icon with an arrow inside, styled with the primary purple gradient.
33	Outer border wrapper with a glass effect.
34	4. Hero Video Integration (Critical Details):
35
36	Source: HLS Stream URL: https://customer-cbeadsgr09pnsezs.cloudflarestream.com/697945ca6b876878dba3b23fbd2f1561/manifest/video.m3u8
37	Fallback: If HLS fails, fallback to this MP4: /_videos/v1/f0c78f536d5f21a047fb7792723a36f9d647daa1
38	Implementation: Do NOT use react-player. Use a native <video> tag with a custom useEffect hook implementation of hls.js.
39	Styling:
40	Blend Mode: Use mix-blend-screen so the video black background blends into the page.
41	Positioning: The video should be at the bottom of the hero. Apply a negative top margin (-mt-[150px]) so it overlaps behind the text.
42	Z-Index: Ensure the text content is z-20 (above) and video is z-10 (below).
43	Layout: The video must be 100% width (w-full), auto height, and stretch edge-to-edge without being cropped (do not use object-contain or fixed heights).
44	Overlay: Add a gradient fade (from-[#010101] via-transparent to-[#010101]) over the video container.
45	5. Logo Cloud Section (Animated):
46
47	Place this section immediately below the video.
48	Background: Semi-transparent glass (bg-black/20 backdrop-blur-sm) with a top border (border-white/5).
49	Layout:
50	Desktop: "Powering the best teams" text on the left, separated by a vertical divider. Animated logo slider on the right.
51	Mobile: Stacked vertically.
52	Animation: Create an InfiniteSlider component using motion/react that scrolls logos horizontally forever.
53	Logos: Use these SVG URLs (OpenAI, Nvidia, GitHub, etc.) and apply brightness-0 invert to make them white.
54	https://html.tailus.io/blocks/customers/openai.svg
55	https://html.tailus.io/blocks/customers/nvidia.svg
56	(Include others similarly)
57	Please assemble these into a cohesive Hero.tsx, App.tsx, and components/ui/infinite-slider.tsx structure.