고퀄리티 웹사이트 비주얼 만들기

Create a dark-themed immersive hero section with a centered layout. 1. Layout:** A large, bold headline centered in the middle, overlaid on top of a massive 3D object. Below the headline, add a row of translucent glass cards for `(기능/특징 리스트: 예: Features, Pricing)` and a primary CTA button labeled `(버튼명: 예: Get Started)` with a glowing hover effect. 2. 3D Element:** Use **React Three Fiber** to render a large `{3D 도형 모양: 예: Torus ring / Sphere / Twisted Knot}` in the center. The material must be **Hyper-Glossy Chrome/Liquid Metal** (`metalness={1}`, `roughness={0.1}`). **Crucial:** Add an `<Environment preset="city" />` to ensure realistic reflections on the metal. The object should slowly rotate and float. 3. Styling:** Use Tailwind CSS. Background should be **Deep Black (#000)**. Typography should be massive, white, and sans-serif. Add a 'glassmorphism' effect (`backdrop-filter: blur(20px)`) to the navbar and UI elements to separate them from the 3D background. 4. Content & UI Variables (선택 사항 - 수정 가능) | Element | Variable (Placeholder) | | :--- | :--- | | **Headline** | `{헤드라인 수정}` | | **Sub-Headline** | `{서브헤드라인 문장 수정}` | | **Navbar Items** | Row of translucent glass cards for (Features, Pricing) | | **CTA Button Label** | `{버튼명}` |

키워드 표현 특징 `Hyper-Glossy Chrome`, `React Three Fiber`, `Realistic Reflections`

Create a **3D Spatial Dither & Dot Matrix** landing page inspired by 'Figmapedia'. The aesthetic should be **High-Tech, Monochromatic, and Volumetric**. > 1. Visual Style (The Void) > * **Background:** Strictly **Deep Black {#050505}**. Add a subtle **Grid Pattern** overlay (very low opacity white lines) to define the spatial depth. * **Texture:** Apply a **CRT Scanline** or **Noise** effect over the entire screen to mimic an old monitor signal. 2. The Hero Element (3D Point Cloud):*** **Technology:** Use **React Three Fiber** to create a **Volumetric Point Cloud. * **Shape:** Render a large `(3D 형태: 예: Swirling Galaxy / DNA Helix / Torus)` composed entirely of **thousands of tiny white square dots** (using `PointsMaterial`). * **Depth:** The dots should fade in opacity based on their distance from the camera (Depth of Field) to create a true 3D tunnel effect.* **Animation:** The point cloud should slowly rotate and undulate like a living organism. 3. Layout & Structure (System Interface): * **Split Layout:** A 40/60 split. Left side for text, Right side for the 3D visualization. * **Navbar:** A 'Spreadsheet' style navbar. Top border and bottom border with vertical dividers separating items like `{메뉴명 1: 예: INDEX}`, `{메뉴명 2: 예: RADAR}`, etc. * **Footer:** A sticky status bar at the bottom displaying technical data like 'SYSTEM: ONLINE', 'MEM: 64TB', 'LAT: 45.33ms'. 4. Typography & Content Variables (수정 가능 영역)** * **Headline Font:** Use a **Serif font** (e.g., 'Times New Roman' or 'EB Garamond') for the massive headline to give an archival feel. * **UI Font:** Use a **Monospace font** (e.g., 'Space Mono') for all other UI elements (navbar, footer, body text). * **Headline:** `{헤드라인}` * **Subheadline:** `{서브헤드라인 수정}` * **Text Decoration:** Add 'System Boot' style text decorations like `// SIGNAL_DETECTED_` or `[ JOIN ]`. ➡️ Buttons * **Primary Button:** * **Style:** Solid White background, Black text. * **Label:** `{버튼 1: 예: INITIALIZE_CORE}` * **Secondary Button:** * **Style:** Transparent background, White border. * **Label:** `{버튼 2: 예: DOC_READER ->}`

키워드 표현 특징 1-bit Aesthetic`, `Halftone Shader`, `Monochromatic Noise

Create a high-end Cinematic Futuristic Landing Page using Three.js, WebGL, and GSAP. Focus mainly on visual impact and Shaders. 1. Core Technology & Visual Goal * **3D Framework:** Three.js / WebGL * **Animation:** GSAP (GreenSock) for smooth parallax and UI effects. * **Focus:** Maximum visual impact and advanced Shader implementation. * **Color Palette:** Deep Midnight Blue, Neon Purple, Electric Cyan. 2. Atmosphere (Dark FUI & Lighting) * **Background:** Deep Midnight Blue/Purple gradient. * **Overlay:** A faint technical grid overlay to enhance the futuristic atmosphere. * **Lighting Animation:** Create a **'Volumetric Light Beam'** or a diagonal neon flash that continuously sweeps across the background to simulate dynamic, dramatic lighting. 3. Typography (Gradient Motion) * **Headline Font:** Massive, Bold Sans-serif. * **Headline Effect:** Apply a **moving linear-gradient text-clip** animation to the headline so the text shimmers fluidly (e.g., White to Electric Cyan to White). * **Label/Body Font:** Use **Monospace** fonts for all supporting text to maintain a technical feel. 4. Content Variables (수정 가능 영역) | Element | Variable (Placeholder) | | :--- | :--- | | **Headline** | `{헤드라인}` | | **Tagline/Labels** | `{태그라인}` | | **Button Label** | `{버튼명}` | 4. Shader & 3D Core Element (The Core) * **Visual:** Render a large **Frosted Glass Element** (Abstract Shape or Card) using **Three.js Shaders**. * **Primary Effect:** Apply a sophisticated **Liquid Distortion/Refraction Shader**. The background elements viewed through this frosted glass must warp and ripple fluidly. * **Animation:** Use **GSAP** to give the Frosted Glass Element a smooth, slow floating parallax or undulation effect. 5. UI Components & Accents * **Accents:** Use **Electric Cyan & Neon Purple** for all UI accents and highlights. * **Button Style:** Apply an **Apple-style 'Rotating Conic-Gradient Border'** to the main button (`{버튼명}`). * **Effect:** The border fill-color (using Cyan/Purple/White gradient) must spin **360° continuously** with a strong neon glow.

키워드 표현 특징 Volumetric Light Beam`, `Liquid Glass Shaders`, `Conic-Gradient Border

# Grid-Heavy Retro Neobrutalist Hero Section Prompt 1. Layout: Strict Bento Grid * **Structure:** Use a **Strict Bento Grid Layout**. The screen must be divided into distinct, non-overlapping rectangular blocks. * **Separators:** All blocks must be separated by **Thick Black Borders** (`3px solid black`). There should be no invisible margins or padding between the blocks (raw and constrained look). ### ➡️ Grid Content Definition (수정 가능 영역) | Block | Size / Placement | Content Element | | :--- | :--- | :--- | | **Block 1 (Headline)** | Large (Approx. 50% of the screen) | Massive headline: `{헤드라인}` | | **Block 2 (Visual)** | Medium | An image or illustration: `{Image/Illustration}` | | **Block 3 (Marquee)** | Small (Full width, narrow height) | Marquee (infinite scrolling text): `{흐르는 텍스트 내용}` | | **Block 4 (CTA)** | Small (e.g., Corner Placement) | Primary Call-to-Action button | ## 2. 🎨 Styling & Color * **Aesthetic:** Retro Neobrutalist, Raw, High-Contrast. * **Color Palette:** Use high-contrast **Acid Colors** like `{Hot Pink}` and `{Bright Yellow}` against a strict white/black base. * **Shadows:** For Block 2 (Visual) and other key elements, apply a **Hard Drop Shadow** (no blur, large black offset) for a raw, layered look. * **Buttons:** * **Shape:** Sharp rectangles (`border-radius: 0`). * **Hover Effect:** Apply an **instant color-invert hover effect** (e.g., Solid Hot Pink to White with Hot Pink border). ## 3. ✍️ Typography & Content * **Font Pairing:** Use a mix of **Serif font** (for elegance and archival feel) and **Bold Sans-serif** (for impact and main headlines). * **Font Size:** Font sizes must be **extreme** (Massive for headlines, Small/Monospace for details). * **Marquee:** Block 3 must feature an **infinite scrolling text** effect. ### ➡️ Variables (수정 가능) | Element | Variable (Placeholder) | | :--- | :--- | | **Headline Text** | `{헤드라인}` | | **Marquee Text** | `{흐르는 텍스트 내용}` | | **Acid Color 1** | `{선택사항: Hot Pink}` | | **Acid Color 2** | `{선택사항:Bright Yellow}` | | **CTA Button Label** | `{버튼명}` |

키워드 표현 특징 Strict Bento Grid`, `Massive Typography`, `Raw & Acid Colors