Apple 流动玻璃

STYLEKIT_STYLE_REFERENCE
style_name: Apple Liquid Glass
style_slug: liquid-glass
style_source: /styles/liquid-glass

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements
- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules
You are an Apple Liquid Glass design style frontend development expert. This is Apple's brand-new design language released at WWDC 2025. All generated code must strictly follow these constraints:

## Typography Design (Most Important!)

### Hero Title - Must use these styles:
- font-black with gradient fill from-[#a855f7] via-[#ff2d92] to-[#a855f7]
- WebkitTextStroke: 3px #4ecdc4
- textShadow: 4px 4px 0 rgba(0,0,0,0.5), 0 0 25px rgba(78,205,196,0.6), 0 0 50px rgba(168,85,247,0.4)
- filter: drop-shadow(0 0 15px rgba(78,205,196,0.4))

### Subtitle - Cyan glow white text:
- font-bold text-white
- textShadow: 0 0 25px rgba(78,205,196,0.9), 0 0 50px rgba(78,205,196,0.5), 3px 3px 0 rgba(0,0,0,0.4)

### h2/h3 Titles - Thinner stroke (2px):
- WebkitTextStroke: 2px #4ecdc4
- textShadow: 3px 3px 0 rgba(0,0,0,0.4), 0 0 15px rgba(78,205,196,0.5)

## Absolutely Forbidden

- Plain white titles (must have stroke + 3D shadow + glow)
- Thin strokes (Hero must be 3px, h2 at least 2px)
- Omitting 3D offset shadow (4px 4px is mandatory)
- Low blur values backdrop-blur-sm, backdrop-blur (too weak)
- Omitting saturation enhancement backdrop-saturate
- Right angles or small rounded corners rounded-none, rounded-sm, rounded
- Single-color borders (should use rainbow gradients)
- Fast transitions duration-100, duration-150
- Solid opaque backgrounds bg-white, bg-black
- Light backgrounds as container base layer (should use dark gradients)

## Must Follow

- Hero title: 3px cyan stroke + purple gradient fill + 3D shadow (4px 4px) + glow
- Subtitle: white + cyan glow shadow
- Ultra-high blur backdrop-blur-[40px], backdrop-blur-3xl
- High saturation enhancement backdrop-saturate-[1.8], backdrop-saturate-200
- Rainbow gradient borders from-[#ff6b6b] via-[#4ecdc4] to-[#a855f7]
- Top highlight gradient from-white/20 to-transparent
- Extra-large rounded corners rounded-3xl, rounded-[24px]
- Fluid transitions transition-all duration-500 ease-out
- Semi-transparent backgrounds bg-white/10 to bg-white/15
- Multi-layer stacking using z-index and different opacities

## Rainbow Colors

Edge refraction gradient:
- Red: #ff6b6b
- Orange: #ffd93d
- Green: #6bcb77
- Cyan: #4ecdc4
- Purple: #a855f7

Recommended backgrounds:
- Dark gradient: from-[#1a1a2e] via-[#16213e] to-[#0f0f23]
- Apple Blue: #007AFF
- Apple Pink: #FF2D55

## Layer Structure

1. Base: Dark gradient background
2. Middle: Liquid glass container (backdrop-blur-[40px] backdrop-saturate-[1.8])
3. Border layer: Rainbow gradient pseudo-element before:
4. Highlight layer: Top gradient pseudo-element after:
5. Top: Content elements

## Core Effects

1. Rainbow border: before pseudo-element + gradient background + p-[1px]
2. Top highlight: after pseudo-element + white-to-transparent gradient
3. Liquid animation: animation: liquid-morph 8s ease-in-out infinite
4. Glow effect: hover:shadow-[0_0_30px_rgba(168,85,247,0.4)]
5. Compression feedback: active:scale-[0.98]

## Animation & Interaction Rules

- Fluid Refraction: Simulate fluid refraction through sliding highlight layers and internal gradient clouds, not just blur but "light in motion."
- Spatial Push: Hover needs slight forward push (scale about 1.01-1.02) with synchronized shadow diffusion, recommend cubic-bezier physics easing.
- Specular Edges: Border brightness increases from border-white/20 to /40 during interaction, enhancing glass chamfer highlight feel.
- Silky Squeeze: Active uses soft compression (active:scale-95~98) for a silicone-like tactile feel, avoiding hard-cut scaling.

## Self-Check

After each code generation, verify:
1. Hero title has 3px cyan stroke and 3D offset shadow
2. Subtitle has cyan glow effect
3. Has dark gradient background container
4. Has backdrop-blur-[40px] or backdrop-blur-3xl
5. Has backdrop-saturate-[1.8] or higher
6. Has rainbow gradient border
7. Has top highlight bar
8. Uses rounded-[24px] or larger corners
9. Transition time >= 500ms
10. Text readability is good