Organic Blob
Interface

AI Request Prompt

Design a landing page in Organic Blob style — flowing organic shapes with nature-inspired earth tones.

COLOR TOKENS:
--bg: #faf5ef (warm off-white)
--bg-warm: #f5ebe0 (warm beige)
--text: #3d3229 (dark brown)
--text-muted: #8a7e74 (warm gray-brown)
--sage: #87a878 (muted green)
--sage-soft: #dce8d4 (light sage)
--terracotta: #c4704b (earthy orange-red)
--terracotta-soft: #f5ddd0 (light terracotta)
--sand: #d4a574 (warm golden)
--sand-soft: #f0e2d0 (light sand)
--cream: #fdf8f0 (near-white warm)
--border: rgba(61, 50, 41, 0.1)
--card: rgba(253, 248, 240, 0.85)
No other colors. All tones must remain earthy and natural.

TYPOGRAPHY:
Heading: "Fraunces" optical-size serif, 700-800 weight, tracking -0.02em, italic for emphasis
Body: "DM Sans" sans-serif, 400/500/600 weight
Scale: clamp(2.2rem, 5.5vw, 4rem) for h1, 1.3rem h2, 1.1rem h3
Body line-height: 1.7
Heading line-height: 1.2

BLOB SHAPES (key feature):
All containers use 8-value border-radius for organic forms:
- Hero: 40% 60% 55% 45% / 55% 45% 55% 45%
- Card 1: 30% 70% 70% 30% / 30% 30% 70% 70%
- Card 2: 70% 30% 30% 70% / 60% 40% 60% 40%
- Card 3: 50% 50% 30% 70% / 40% 60% 40% 60%
- Showcase section: 60% 40% 45% 55% / 50% 55% 45% 50%
- Prompt section: 45% 55% 50% 50% / 50% 50% 55% 45%
- Badge: 30% 70% 70% 30% / 50% 50% 50% 50%
- Pills: varied per pill for organic feel

UI:
- Hero card: 1px solid var(--border), blob border-radius, background var(--card), backdrop-filter blur(16px), box-shadow 0 20px 60px rgba(61,50,41,0.06), decorative pseudo-element leaves
- Badge: linear-gradient(135deg, var(--sage), #6d9660), color white, blob border-radius, uppercase
- Pill tags: each with unique blob border-radius, tinted backgrounds matching color tokens, 8px colored dot
- Cards: each with different blob border-radius, warm-toned box-shadow, leaf pseudo-element decoration, hover translateY(-4px) scale(1.01)
- Buttons: linear-gradient(135deg, var(--terracotta), #a85a3a), blob border-radius, box-shadow 0 6px 20px rgba(196,112,75,0.25)

FLOATING BACKGROUND:
- Fixed container with 4 large blurred blobs (filter: blur(40px), opacity 0.12)
- Each blob has gradient fill using theme colors
- CSS animation: gentle floating with translate + rotate + scale, 18-25s duration, ease-in-out infinite
- Some blobs also morph border-radius during animation

WAVY DIVIDERS:
- SVG path elements with organic curves between sections
- stroke: var(--border), stroke-width 1.5, no fill
- Viewbox 1200x40, natural flowing curve paths

BLOB GALLERY:
- 5 sample blob shapes with gradient fills
- CSS morphing animation: border-radius transitions through 4 organic states over 8s
- Staggered animation-delay for visual variety

MOTION:
- Floating blobs: translate + rotate + scale, 18-25s, ease-in-out infinite
- Blob morph: border-radius keyframe cycle, 8s ease-in-out infinite
- Pill entrance: scale(0.85) to scale(1), opacity 0 to 1, 0.5s ease, stagger 0.08s
- Card hover: translateY(-4px) scale(1.01), box-shadow expansion, 0.4s ease
- Leaf pseudo-elements: gentle rotation sway, 12-15s
- All CSS only — no JavaScript animations

LAYOUT:
- Container: min(1040px, 92vw) centered, padding 28px 0 100px
- Hero padding: clamp(32px, 6vw, 64px)
- Demo grid: auto-fit minmax(280px, 1fr), gap 24px
- Blob gallery: flex-wrap, centered, gap 20px, items 100x100px
- Color palette: flex-wrap, gap 12px, swatches 60x60px with blob shapes
- Ambient background: fixed div with 4 radial-gradients + floating blob layer

RESPONSIVE:
- Below 768px: simpler blob border-radius values, single column cards, smaller blob samples (70px), reduced hero padding, title clamps to 1.8rem
- Above 768px: full organic shapes, multi-column grid, full animations

FORBIDDEN:
- No sharp corners — all elements use organic blob border-radius
- No dark backgrounds or text darker than #3d3229
- No neon or saturated colors — all tones must be earthy and natural
- No JavaScript animations — CSS only
- No monospace fonts for display text
- No straight-line dividers — use wavy SVG paths

OUTPUT:
1. Single HTML file with inline CSS
2. Warm earthy base with multi-layer organic background (radial gradients + floating blobs)
3. All containers with 8-value blob border-radius
4. Nature-inspired card system with leaf decorations
5. SVG wavy section dividers
6. Morphing blob shape gallery with CSS animations
7. Color token custom properties in :root
8. Responsive layout using CSS clamp(), grid auto-fit, and flex-wrap

Organic Blob 스타일의 랜딩 페이지를 디자인해줘 — 자연에서 영감을 받은 어스 톤의 유기적 형태.

색상 토큰:
--bg: #faf5ef (따뜻한 오프화이트)
--bg-warm: #f5ebe0 (따뜻한 베이지)
--text: #3d3229 (다크 브라운)
--text-muted: #8a7e74 (따뜻한 그레이 브라운)
--sage: #87a878 (차분한 그린)
--sage-soft: #dce8d4 (연한 세이지)
--terracotta: #c4704b (흙빛 오렌지 레드)
--terracotta-soft: #f5ddd0 (연한 테라코타)
--sand: #d4a574 (따뜻한 골든)
--sand-soft: #f0e2d0 (연한 샌드)
--cream: #fdf8f0 (거의 흰색에 가까운 따뜻한 톤)
--border: rgba(61, 50, 41, 0.1)
--card: rgba(253, 248, 240, 0.85)
다른 색상 사용 금지. 모든 톤은 흙빛과 자연색 유지.

타이포그래피:
제목: "Fraunces" optical-size serif, 700-800 weight, tracking -0.02em, 강조에 이탤릭
본문: "DM Sans" sans-serif, 400/500/600 weight
스케일: h1은 clamp(2.2rem, 5.5vw, 4rem), h2 1.3rem, h3 1.1rem
본문 line-height: 1.7
제목 line-height: 1.2

블롭 형태 (핵심 특징):
모든 컨테이너에 8개 값의 border-radius로 유기적 형태 적용:
- 히어로: 40% 60% 55% 45% / 55% 45% 55% 45%
- 카드 1: 30% 70% 70% 30% / 30% 30% 70% 70%
- 카드 2: 70% 30% 30% 70% / 60% 40% 60% 40%
- 카드 3: 50% 50% 30% 70% / 40% 60% 40% 60%
- 쇼케이스 섹션: 60% 40% 45% 55% / 50% 55% 45% 50%
- 프롬프트 섹션: 45% 55% 50% 50% / 50% 50% 55% 45%
- 배지: 30% 70% 70% 30% / 50% 50% 50% 50%
- 필: 필마다 다른 유기적 형태

UI:
- 히어로 카드: 1px solid var(--border), 블롭 border-radius, background var(--card), backdrop-filter blur(16px), box-shadow 0 20px 60px rgba(61,50,41,0.06), 장식 pseudo-element 잎
- 배지: linear-gradient(135deg, var(--sage), #6d9660), 흰색 텍스트, 블롭 border-radius, uppercase
- 필 태그: 각각 고유한 블롭 border-radius, 색상 토큰에 맞춘 틴티드 배경, 8px 컬러 도트
- 카드: 각각 다른 블롭 border-radius, 따뜻한 톤 box-shadow, 잎 장식, hover시 translateY(-4px) scale(1.01)
- 버튼: linear-gradient(135deg, var(--terracotta), #a85a3a), 블롭 border-radius, box-shadow 0 6px 20px rgba(196,112,75,0.25)

플로팅 배경:
- 고정 컨테이너에 4개의 큰 블러 블롭 (filter: blur(40px), opacity 0.12)
- 각 블롭은 테마 색상의 그라데이션 채우기
- CSS 애니메이션: translate + rotate + scale로 부드러운 부유, 18-25초 주기, ease-in-out infinite
- 일부 블롭은 애니메이션 중 border-radius도 변형

웨이브 구분선:
- 섹션 간 유기적 곡선의 SVG path 요소
- stroke: var(--border), stroke-width 1.5, fill 없음

블롭 갤러리:
- 5개 샘플 블롭 형태, 그라데이션 채우기
- CSS 모핑 애니메이션: 8초 동안 4개 유기적 상태로 border-radius 전환
- 시각적 다양성을 위한 시차 animation-delay

모션:
- 플로팅 블롭: translate + rotate + scale, 18-25초, ease-in-out infinite
- 블롭 모핑: border-radius 키프레임 사이클, 8초 ease-in-out infinite
- 필 등장: scale(0.85)→scale(1), opacity 0→1, 0.5s ease, 0.08s 순차 지연
- 카드 hover: translateY(-4px) scale(1.01), box-shadow 확장, 0.4s ease
- 잎 pseudo-elements: 부드러운 회전 흔들림, 12-15초
- 모든 애니메이션 CSS 전용 — JavaScript 애니메이션 없음

레이아웃:
- 컨테이너: min(1040px, 92vw) 중앙정렬, padding 28px 0 100px
- 히어로 padding: clamp(32px, 6vw, 64px)
- 데모 그리드: auto-fit minmax(280px, 1fr), gap 24px
- 블롭 갤러리: flex-wrap, 중앙정렬, gap 20px, 아이템 100x100px
- 컬러 팔레트: flex-wrap, gap 12px, 스와치 60x60px 블롭 형태
- 앰비언트 배경: 4개 radial-gradient가 있는 fixed div + 플로팅 블롭 레이어

반응형:
- 768px 미만: 단순화된 블롭 border-radius, 단일 열 카드, 작은 블롭 샘플(70px), 줄어든 히어로 패딩
- 768px 이상: 완전한 유기적 형태, 다열 그리드, 전체 애니메이션

금지사항:
- 날카로운 모서리 금지 — 모든 요소에 유기적 블롭 border-radius
- 다크 배경이나 #3d3229보다 어두운 텍스트 금지
- 네온이나 채도 높은 색상 금지 — 모든 톤 흙빛과 자연색 유지
- JavaScript 애니메이션 금지 — CSS 전용
- 직선 구분선 금지 — 웨이브 SVG 경로 사용

출력:
1. 인라인 CSS가 포함된 단일 HTML 파일
2. 다층 유기적 배경(radial gradient + 플로팅 블롭)의 따뜻한 흙빛 베이스
3. 모든 컨테이너에 8개 값 블롭 border-radius
4. 잎 장식이 있는 자연 영감 카드 시스템
5. SVG 웨이브 섹션 구분선
6. CSS 애니메이션의 모핑 블롭 형태 갤러리
7. :root에 색상 토큰 커스텀 프로퍼티
8. CSS clamp(), grid auto-fit, flex-wrap을 활용한 반응형 레이아웃

Organic Blobスタイルのランディングページをデザインしてください — 自然にインスパイアされたアーストーンの流動的なオーガニック形状。

カラートークン:
--bg: #faf5ef (温かみのあるオフホワイト)
--bg-warm: #f5ebe0 (温かみのあるベージュ)
--text: #3d3229 (ダークブラウン)
--text-muted: #8a7e74 (温かみのあるグレーブラウン)
--sage: #87a878 (落ち着いたグリーン)
--sage-soft: #dce8d4 (ライトセージ)
--terracotta: #c4704b (アーシーなオレンジレッド)
--terracotta-soft: #f5ddd0 (ライトテラコッタ)
--sand: #d4a574 (温かみのあるゴールデン)
--sand-soft: #f0e2d0 (ライトサンド)
--cream: #fdf8f0 (ほぼ白に近い温かみのあるトーン)
--border: rgba(61, 50, 41, 0.1)
--card: rgba(253, 248, 240, 0.85)
他の色は使用禁止。全てのトーンはアーシーでナチュラルに。

タイポグラフィ:
見出し: "Fraunces" optical-size serif, 700-800 weight, tracking -0.02em, 強調にイタリック
本文: "DM Sans" sans-serif, 400/500/600 weight
スケール: h1はclamp(2.2rem, 5.5vw, 4rem), h2 1.3rem, h3 1.1rem
本文 line-height: 1.7
見出し line-height: 1.2

ブロブシェイプ（主要特徴）:
全コンテナに8値のborder-radiusでオーガニックフォームを適用:
- ヒーロー: 40% 60% 55% 45% / 55% 45% 55% 45%
- カード1: 30% 70% 70% 30% / 30% 30% 70% 70%
- カード2: 70% 30% 30% 70% / 60% 40% 60% 40%
- カード3: 50% 50% 30% 70% / 40% 60% 40% 60%
- ショーケースセクション: 60% 40% 45% 55% / 50% 55% 45% 50%
- プロンプトセクション: 45% 55% 50% 50% / 50% 50% 55% 45%
- バッジ: 30% 70% 70% 30% / 50% 50% 50% 50%
- ピル: ピルごとに異なるオーガニック形状

UI:
- ヒーローカード: 1px solid var(--border), ブロブborder-radius, background var(--card), backdrop-filter blur(16px), box-shadow 0 20px 60px rgba(61,50,41,0.06), 装飾pseudo-element葉
- バッジ: linear-gradient(135deg, var(--sage), #6d9660), 白テキスト, ブロブborder-radius, uppercase
- ピルタグ: 各ピル固有のブロブborder-radius, カラートークンに合わせたティンテッド背景, 8pxカラードット
- カード: 各異なるブロブborder-radius, 温かみのあるbox-shadow, 葉装飾, hover時translateY(-4px) scale(1.01)
- ボタン: linear-gradient(135deg, var(--terracotta), #a85a3a), ブロブborder-radius, box-shadow 0 6px 20px rgba(196,112,75,0.25)

フローティング背景:
- 固定コンテナに4つの大きなブラーブロブ (filter: blur(40px), opacity 0.12)
- 各ブロブはテーマカラーのグラデーション塗り
- CSSアニメーション: translate + rotate + scaleで穏やかな浮遊, 18-25秒周期, ease-in-out infinite
- 一部ブロブはアニメーション中にborder-radiusも変形

ウェーブディバイダー:
- セクション間のオーガニック曲線SVG path要素
- stroke: var(--border), stroke-width 1.5, fillなし

ブロブギャラリー:
- 5つのサンプルブロブ形状、グラデーション塗り
- CSSモーフィングアニメーション: 8秒で4つのオーガニック状態にborder-radius遷移
- 視覚的多様性のためのstaggered animation-delay

モーション:
- フローティングブロブ: translate + rotate + scale, 18-25秒, ease-in-out infinite
- ブロブモーフ: border-radiusキーフレームサイクル, 8秒ease-in-out infinite
- ピル登場: scale(0.85)→scale(1), opacity 0→1, 0.5s ease, 0.08s順次遅延
- カードhover: translateY(-4px) scale(1.01), box-shadow拡張, 0.4s ease
- 葉pseudo-elements: 穏やかな回転揺れ, 12-15秒
- 全アニメーションCSS専用 — JavaScriptアニメーションなし

レイアウト:
- コンテナ: min(1040px, 92vw) 中央揃え, padding 28px 0 100px
- ヒーローpadding: clamp(32px, 6vw, 64px)
- デモグリッド: auto-fit minmax(280px, 1fr), gap 24px
- ブロブギャラリー: flex-wrap, 中央揃え, gap 20px, アイテム100x100px
- カラーパレット: flex-wrap, gap 12px, スウォッチ60x60pxブロブ形状
- アンビエント背景: 4つのradial-gradientを持つfixed div + フローティングブロブレイヤー

レスポンシブ:
- 768px未満: シンプルなブロブborder-radius, 単一列カード, 小さいブロブサンプル(70px), 縮小ヒーローpadding
- 768px以上: 完全なオーガニック形状, マルチカラムグリッド, フルアニメーション

禁止事項:
- 鋭い角禁止 — 全要素にオーガニックブロブborder-radius
- ダーク背景や#3d3229より暗いテキスト禁止
- ネオンや彩度の高い色禁止 — 全トーンアーシーでナチュラル維持
- JavaScriptアニメーション禁止 — CSS専用
- 直線ディバイダー禁止 — ウェーブSVGパス使用

出力:
1. インラインCSS付きの単一HTMLファイル
2. 多層オーガニック背景（radial gradient + フローティングブロブ）の温かいアーシーベース
3. 全コンテナに8値ブロブborder-radius
4. 葉装飾のある自然インスパイアカードシステム
5. SVGウェーブセクションディバイダー
6. CSSアニメーションのモーフィングブロブシェイプギャラリー
7. :rootにカラートークンカスタムプロパティ
8. CSS clamp()、grid auto-fit、flex-wrapを活用したレスポンシブレイアウト