Spaces:
Running
Running
| ```html | |
| <!DOCTYPE html> | |
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TextForge Pro - Text Processing Suite</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" | |
| rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| display: ['Space Grotesk', 'sans-serif'], | |
| mono: ['JetBrains Mono', 'monospace'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| :root { | |
| --bg-primary: #0a0a0f; | |
| --bg-secondary: #12121a; | |
| --bg-tertiary: #1a1a25; | |
| --fg-primary: #e8e8ed; | |
| --fg-secondary: #9898a8; | |
| --fg-muted: #5a5a6e; | |
| --accent-primary: #00d4aa; | |
| --accent-secondary: #7c3aed; | |
| --accent-tertiary: #f59e0b; | |
| --border-color: #2a2a3a; | |
| --card-bg: rgba(18, 18, 26, 0.8); | |
| --glow-primary: rgba(0, 212, 170, 0.15); | |
| --glow-secondary: rgba(124, 58, 237, 0.15); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--border-color) transparent; | |
| } | |
| *::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| *::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| *::-webkit-scrollbar-thumb { | |
| background: var(--border-color); | |
| border-radius: 3px; | |
| } | |
| *::-webkit-scrollbar-thumb:hover { | |
| background: var(--fg-muted); | |
| } | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background: var(--bg-primary); | |
| color: var(--fg-primary); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| .bg-mesh { | |
| position: fixed; | |
| inset: 0; | |
| z-index: -1; | |
| background: | |
| radial-gradient(ellipse 80% 50% at 20% 20%, var(--glow-primary), transparent), | |
| radial-gradient(ellipse 60% 40% at 80% 80%, var(--glow-secondary), transparent), | |
| linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); | |
| } | |
| .noise-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: -1; | |
| opacity: 0.03; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); | |
| } | |
| .glass-card { | |
| background: var(--card-bg); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid var(--border-color); | |
| border-radius: 16px; | |
| transition: border-color 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .glass-card:hover { | |
| border-color: rgba(0, 212, 170, 0.3); | |
| } | |
| .input-field { | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| color: var(--fg-primary); | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 14px; | |
| padding: 16px; | |
| width: 100%; | |
| resize: vertical; | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| } | |
| .input-field:focus { | |
| outline: none; | |
| border-color: var(--accent-primary); | |
| box-shadow: 0 0 0 3px var(--glow-primary); | |
| } | |
| .input-field::placeholder { | |
| color: var(--fg-muted); | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 10px 18px; | |
| border-radius: 10px; | |
| font-weight: 500; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| border: 1px solid transparent; | |
| font-family: 'Space Grotesk', sans-serif; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--accent-primary), #00a888); | |
| color: var(--bg-primary); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 20px var(--glow-primary); | |
| } | |
| .btn-primary:active { | |
| transform: translateY(0); | |
| } | |
| .btn-secondary { | |
| background: var(--bg-tertiary); | |
| color: var(--fg-primary); | |
| border-color: var(--border-color); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--border-color); | |
| border-color: var(--accent-secondary); | |
| } | |
| .btn-accent { | |
| background: linear-gradient(135deg, var(--accent-secondary), #5b21b6); | |
| color: white; | |
| } | |
| .btn-accent:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 20px var(--glow-secondary); | |
| } | |
| .btn-small { | |
| padding: 6px 12px; | |
| font-size: 12px; | |
| border-radius: 8px; | |
| } | |
| .preset-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 8px 14px; | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 20px; | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| font-family: 'Space Grotesk', sans-serif; | |
| color: var(--fg-primary); | |
| } | |
| .preset-chip:hover { | |
| border-color: var(--accent-primary); | |
| background: rgba(0, 212, 170, 0.1); | |
| transform: translateY(-1px); | |
| } | |
| .preset-chip.active { | |
| background: var(--accent-primary); | |
| color: var(--bg-primary); | |
| border-color: var(--accent-primary); | |
| } | |
| .stat-card { | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| padding: 16px; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| border-color: var(--accent-primary); | |
| transform: translateY(-2px); | |
| } | |
| .stat-value { | |
| font-size: 28px; | |
| font-weight: 700; | |
| color: var(--accent-primary); | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .stat-label { | |
| font-size: 12px; | |
| color: var(--fg-secondary); | |
| margin-top: 4px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .history-item { | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 10px; | |
| padding: 12px; | |
| margin-bottom: 8px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .history-item:hover { | |
| border-color: var(--accent-secondary); | |
| background: rgba(124, 58, 237, 0.05); | |
| transform: translateX(4px); | |
| } | |
| .suggestion-card { | |
| background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05)); | |
| border: 1px solid rgba(245, 158, 11, 0.2); | |
| border-radius: 12px; | |
| padding: 14px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .suggestion-card:hover { | |
| border-color: var(--accent-tertiary); | |
| transform: translateX(4px); | |
| background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.08)); | |
| } | |
| .progress-bar { | |
| height: 4px; | |
| background: var(--bg-tertiary); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); | |
| border-radius: 2px; | |
| transition: width 0.3s ease; | |
| } | |
| .char-freq-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 8px 12px; | |
| background: var(--bg-tertiary); | |
| border-radius: 8px; | |
| margin-bottom: 6px; | |
| transition: background 0.2s; | |
| } | |
| .char-freq-item:hover { | |
| background: var(--border-color); | |
| } | |
| .char-freq-bar { | |
| flex: 1; | |
| height: 6px; | |
| background: var(--border-color); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .char-freq-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); | |
| border-radius: 3px; | |
| transition: width 0.3s ease; | |
| } | |
| .toast { | |
| position: fixed; | |
| bottom: 24px; | |
| right: 24px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--accent-primary); | |
| border-radius: 12px; | |
| padding: 16px 24px; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| z-index: 1000; | |
| transform: translateY(100px); | |
| opacity: 0; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 10px 40px rgba(0, 212, 170, 0.2); | |
| } | |
| .toast.show { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.7); | |
| backdrop-filter: blur(4px); | |
| z-index: 100; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| } | |
| .modal-overlay.show { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .modal-content { | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 16px; | |
| padding: 24px; | |
| max-width: 400px; | |
| width: 90%; | |
| transform: scale(0.9); | |
| transition: transform 0.3s ease; | |
| } | |
| .modal-overlay.show .modal-content { | |
| transform: scale(1); | |
| } | |
| .word-cloud { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| padding: 12px; | |
| background: var(--bg-tertiary); | |
| border-radius: 12px; | |
| } | |
| .word-chip { | |
| padding: 4px 10px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 16px; | |
| font-size: 12px; | |
| transition: all 0.2s; | |
| cursor: default; | |
| } | |
| .word-chip:hover { | |
| border-color: var(--accent-primary); | |
| background: rgba(0, 212, 170, 0.1); | |
| } | |
| .word-chip.large { | |
| font-size: 14px; | |
| padding: 6px 14px; | |
| background: rgba(0, 212, 170, 0.15); | |
| border-color: var(--accent-primary); | |
| } | |
| .word-chip.medium { | |
| font-size: 13px; | |
| padding: 5px 12px; | |
| } | |
| .saved-preset-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 10px 12px; | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 10px; | |
| margin-bottom: 8px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .saved-preset-item:hover { | |
| border-color: var(--accent-primary); | |
| background: rgba(0, 212, 170, 0.05); | |
| } | |
| .delete-btn { | |
| padding: 4px; | |
| border-radius: 6px; | |
| transition: all 0.2s; | |
| color: var(--fg-muted); | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .delete-btn:hover { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: #ef4444; | |
| } | |
| .tab-btn { | |
| padding: 8px 16px; | |
| background: transparent; | |
| border: none; | |
| color: var(--fg-secondary); | |
| font-size: 14px; | |
| cursor: pointer; | |
| border-bottom: 2px solid transparent; | |
| transition: all 0.2s; | |
| font-family: 'Space Grotesk', sans-serif; | |
| } | |
| .tab-btn:hover { | |
| color: var(--fg-primary); | |
| } | |
| .tab-btn.active { | |
| color: var(--accent-primary); | |
| border-bottom-color: var(--accent-primary); | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-in { | |
| animation: fadeInUp 0.4s ease forwards; | |
| } | |
| .stagger-1 { | |
| animation-delay: 0.1s; | |
| opacity: 0; | |
| } | |
| .stagger-2 { | |
| animation-delay: 0.2s; | |
| opacity: 0; | |
| } | |
| .stagger-3 { | |
| animation-delay: 0.3s; | |
| opacity: 0; | |
| } | |
| .stagger-4 { | |
| animation-delay: 0.4s; | |
| opacity: 0; | |
| } | |
| @keyframes pulse { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .processing { | |
| animation: pulse 1s ease-in-out infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { | |
| background-position: -200% 0; | |
| } | |
| 100% { | |
| background-position: 200% 0; | |
| } | |
| } | |
| .shimmer { | |
| background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-color) 50%, var(--bg-tertiary) 75%); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s infinite; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, | |
| *::before, | |
| *::after { | |
| animation-duration: 0.01ms !important; | |
| animation-iteration-count: 1 !important; | |
| transition-duration: 0.01ms !important; | |
| } | |
| } | |
| @media (max-width: 1024px) { | |
| .main-grid { | |
| grid-template-columns: 1fr !important; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .stat-grid { | |
| grid-template-columns: repeat(2, 1fr) !important; | |
| } | |
| .header-actions { | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .toast { | |
| left: 16px; | |
| right: 16px; | |
| bottom: 16px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .preset-chip { | |
| padding: 6px 10px; | |
| font-size: 12px; | |
| } | |
| .stat-value { | |
| font-size: 22px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bg-mesh"></div> | |
| <div class="noise-overlay"></div> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 backdrop-blur-xl border-b border-[var(--border-color)]"> | |
| <div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between flex-wrap gap-4"> | |
| <div class="flex items-center gap-4"> | |
| <div | |
| class="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center"> | |
| <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h1 class="text-xl font-bold">TextForge Pro</h1> | |
| <p class="text-xs text-[var(--fg-secondary)]">Text Processing Suite</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-3 header-actions"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" | |
| class="text-sm text-[var(--accent-primary)] hover:underline">Built with anycoder</a> | |
| <button id="clearAllBtn" class="btn btn-secondary btn-small"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/> | |
| </svg> | |
| Clear All | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto px-4 py-6"> | |
| <!-- Stats Row --> | |
| <div class="stat-grid grid grid-cols-4 gap-4 mb-6 animate-in stagger-1"> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="charCount">0</div> | |
| <div class="stat-label">Characters</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="wordCount">0</div> | |
| <div class="stat-label">Words</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="lineCount">0</div> | |
| <div class="stat-label">Lines</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="uniqueWords">0</div> | |
| <div class="stat-label">Unique</div> | |
| </div> | |
| </div> | |
| <!-- Main Grid --> | |
| <div class="main-grid grid grid-cols-[1fr_320px] gap-6"> | |
| <!-- Left Column - Editor --> | |
| <div class="space-y-6"> | |
| <!-- Input Section --> | |
| <section class="glass-card p-6 animate-in stagger-2"> | |
| <div class="flex items-center justify-between mb-4 flex-wrap gap-2"> | |
| <h2 class="text-lg font-semibold">Input Text</h2> | |
| <div class="flex gap-2"> | |
| <button id="pasteBtn" class="btn btn-secondary btn-small"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/> | |
| </svg> | |
| Paste | |
| </button> | |
| <label class="btn btn-secondary btn-small cursor-pointer"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/> | |
| </svg> | |
| Import | |
| <input type="file" id="fileInput" class="hidden" accept=".txt,.md,.html,.css,.js,.json,.csv"> | |
| </label> | |
| </div> | |
| </div> | |
| <textarea id="inputText" class="input-field min-h-[200px]" placeholder="Paste or type your text here..."></textarea> | |
| </section> | |
| <!-- Presets Section --> | |
| <section class="glass-card p-6 animate-in stagger-3"> | |
| <h2 class="text-lg font-semibold mb-4">Processing Presets</h2> | |
| <div class="flex flex-wrap gap-2 mb-4" id="presetsContainer"> | |
| <button class="preset-chip" data-preset="clean"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/> | |
| </svg> | |
| Clean Text | |
| </button> | |
| <button class="preset-chip" data-preset="html"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/> | |
| </svg> | |
| Remove HTML | |
| </button> | |
| <button class="preset-chip" data-preset="unique"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/> | |
| </svg> | |
| Unique Only | |
| </button> | |
| <button class="preset-chip" data-preset="sort"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"/> | |
| </svg> | |
| Sort Lines | |
| </button> | |
| <button class="preset-chip" data-preset="minify"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/> | |
| </svg> | |
| Minify | |
| </button> | |
| <button class="preset-chip" data-preset="keywords"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/> | |
| </svg> | |
| Extract Keywords<div class="codepen" data-height="245" data-pen-title="Six Faces / Walking The Cow" data-preview="true" data-prefill='{"title":"Six Faces / Walking The Cow","description":"A scroll-driven 3D cube that rotates through six faces as you move down the page. Each face holds an image from an experiment in reverse creativity, asking AI to work against itself, break composition rules, and leave the mistakes in place.\n\nThe technical part is just the container. The frame on the wall.\n\nFor Daniel Johnston, who walked the cow first.","tags":["scroll","scrollsync","cow","reverse-creativity"],"scripts":[],"stylesheets":[]}'> | |
| <pre data-lang="html"><div id="scene"> | |
| <div id="cube"> | |
| <div class="face" data-face="top" data-i="0"><span class="face-ph">TOP</span></div> | |
| <div class="face" data-face="front" data-i="1"><span class="face-ph">FRONT</span></div> | |
| <div class="face" data-face="right" data-i="2"><span class="face-ph">RIGHT</span></div> | |
| <div class="face" data-face="back" data-i="3"><span class="face-ph">BACK</span></div> | |
| <div class="face" data-face="left" data-i="4"><span class="face-ph">LEFT</span></div> | |
| <div class="face" data-face="bottom" data-i="5"><span class="face-ph">BOTTOM</span></div> | |
| </div> | |
| </div> | |
| <div id="hud"> | |
| <div id="hud_pct">000%</div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="prog_fill"></div> | |
| </div> | |
| <div class="scene-label" id="scene_name">DESCENT</div> | |
| </div> | |
| <button id="theme_toggle" aria-label="Toggle light/dark mode"> | |
| <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <circle cx="12" cy="12" r="4" /> | |
| <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" /> | |
| </svg> | |
| <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z" /> | |
| </svg> | |
| </button> | |
| <div id="scene_strip"> | |
| <a href="#s0" class="scene-dot active"></a> | |
| <a href="#s1" class="scene-dot"></a> | |
| <a href="#s2" class="scene-dot"></a> | |
| <a href="#s3" class="scene-dot"></a> | |
| <a href="#s4" class="scene-dot"></a> | |
| <a href="#s5" class="scene-dot"></a> | |
| </div> | |
| <div id="face_caption"> | |
| <div id="face_caption_num">01</div> | |
| <div id="face_caption_name">DESCENT</div> | |
| </div> | |
| <div id="scroll_container"> | |
| <section id="s0"> | |
| <div class="text-card"> | |
| <div class="tag">Cube Gallery — Bad Art</div> | |
| <h1>WORK<br>AGAINST<br>THE MODEL</h1> | |
| <p class="body-text"> | |
| What happens when you ask AI | |
| to do the opposite of what it was built for? | |
| Break proportion. Flip symmetry. | |
| Leave the mistakes in place. | |
| Scroll to find out. | |
| </p> | |
| <div class="cta-row"> | |
| <a class="cta" href="#s1"> | |
| Enter | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M1 6h10M6 1l5 5-5 5" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="s1"> | |
| <div class="text-card right"> | |
| <div class="h-line"></div> | |
| <div class="tag">01 — Art Rebellion</div> | |
| <h2>FLIP<br>THE<br>PROMPT</h2> | |
| <p class="body-text"> | |
| A cow walking a monster | |
| instead of a monster walking a cow. | |
| That inversion is enough | |
| to break template thinking. | |
| The cape ends up on the wrong body. | |
| </p> | |
| <div class="cta-row"> | |
| <a class="cta-back" href="#s0"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M11 6H1M6 11L1 6l5-5" /> | |
| </svg> | |
| Back | |
| </a> | |
| <a class="cta" href="#s2"> | |
| Turn | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M1 6h10M6 1l5 5-5 5" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="s2"> | |
| <div class="text-card"> | |
| <div class="h-line"></div> | |
| <div class="tag">02 — Moo Walk</div> | |
| <h2>NEITHER<br>LEADS</h2> | |
| <p class="body-text"> | |
| Clashing colors. No balance. | |
| A dance with no choreography. | |
| When the model works against itself | |
| something more genuine surfaces. | |
| </p> | |
| <div class="cta-row"> | |
| <a class="cta-back" href="#s1"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke ="currentColor" stroke-width="1.5"> | |
| <path d="M11 6H1M6 11L1 6l5-5" /> | |
| </svg> | |
| B ack | |
| </a> | |
| <a class="cta" href="#s3"> | |
| Turn | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M1 6h10M6 1l5 5-5 5" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="s3"> | |
| <div class="text-card right"> | |
| <div class="h-line"></div> | |
| <div class="tag">03 — Bad Art</div> | |
| <h2>REVERSE<br>CREATIVITY</h2> | |
| <p class="body-text"> | |
| AI is trained to polish and regularize. | |
| The harder direction is unlearning that. | |
| A television for a head | |
| is not an error. | |
| It is the point. | |
| </p> | |
| <div class="stat-row" style="justify-content: flex-end"> | |
| <div class="stat"> | |
| <span class="stat-num">6</span> | |
| <span class="stat-label">Works</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-num">360</span> | |
| <span class="stat-label">Degrees</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-num">1</span> | |
| <span class="stat-label">Object</span> | |
| </div> | |
| </div> | |
| <div class="cta-row"> | |
| <a class="cta-back" href="#s2"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M11 6H1M6 11L1 6l5-5" /> | |
| </svg> | |
| Back | |
| </a> | |
| <a class="cta" href="#s4"> | |
| Turn | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M1 6h10M6 1l5 5-5 5" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="s4"> | |
| <div class="text-card"> | |
| <div class="h-line"></div> | |
| <div class="tag">04 — No Rules</div> | |
| <h2>NONSENSE<br>AT THE<br>CENTER</h2> | |
| <p class="body-text"> | |
| Dada and the surrealists knew this. | |
| Put the absurd at the center | |
| and the edges stop pretending. | |
| Nine heads in the branches. | |
| The sun has a face and it approves. | |
| </p> | |
| <div class="cta-row"> | |
| <a class="cta-back" href="#s3"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M11 6H1M6 11L1 6l5-5" /> | |
| </svg> | |
| Back | |
| </a> | |
| <a class="cta" href="#s5"> | |
| Turn | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M1 6h10M6 1l5 5-5 5" /> | |
| </svg> | |
| </a> | |
| </div> wdEWs | |
| </div> | |
| </section> | |
| <section id="s5"> | |
| <div class="text-card right"> | |
| <div class="h-line"></div> | |
| <div class="tag">05 — Super Monsters</div> | |
| <h2>RAW<br>NOT<br>POLISHED</h2> | |
| <p class="body-text"> | |
| Forward creativity takes a sketch | |
| and makes it real. | |
| This goes the other way. | |
| Imperfection left in place | |
| is closer to something honest. | |
| </p> | |
| <div class="cta-row"> | |
| <a class="cta-back" href="#s4"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M11 6H1M6 11L1 6l5-5" /> | |
| </svg> | |
| Back | |
| </a> | |
| <a class="cta" href="#s0"> | |
| Begin again | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M1 6h10M6 1l5 5-5 5" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <div id="credit"> | |
| <a href="https://www.linkedin.com/posts/luis-martinez-lr_ai-creativity-reversecreativity-activity-7366853269517651970-zeUD?utm_source=share&utm_medium=member_desktop&rcm=ACoAAFq1dzgByK1x_NMrcq582OMbK-_3q0DthYY" target="_blank" rel="noopener">Reverse Creativity</a> | |
| </div></pre> | |
| <pre data-lang="css">@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400&display=swap"); | |
| @layer reset, tokens, base, layout, cube, ui, cards, reveal, theme, responsive; | |
| @layer reset { | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| } | |
| @layer tokens { | |
| :root { | |
| color-scheme: dark; | |
| --dark-bg: #1c1814; | |
| --dark-fg: #ede8df; | |
| --dark-muted: #8a7b6e; | |
| --light-bg: #f0ece3; | |
| --light-fg: #0d0d14; | |
| --light-muted: #9a9aaa; | |
| --accent-dark: #d4a84b; | |
| --accent-light: #3a6e00; | |
| --bg: var(--dark-bg); | |
| --fg: var(--dark-fg); | |
| --muted: var(--dark-muted); | |
| --accent: var(--accent-dark); | |
| --font-display: "Bebas Neue", sans-serif; | |
| --font-mono: "DM Mono", monospace; | |
| --hairline: 0.0625rem; | |
| --ui-inset: 2rem; | |
| --card-bg: rgba(28, 24, 20, 0.82); | |
| --card-border: rgba(212, 168, 75, 0.2); | |
| --nav-x: calc(var(--ui-inset) + 0.125rem); | |
| --reveal-offset: 0.625rem; | |
| --reveal-duration: 0.5s; | |
| --z-ui: 10; | |
| } | |
| } | |
| @layer base { | |
| html { | |
| color-scheme: dark; | |
| } | |
| body { | |
| background: var(--bg); | |
| color: var(--fg); | |
| font-family: var(--font-mono); | |
| overflow-x: hidden; | |
| transition: background 0.3s ease, color 0.3s ease; | |
| } | |
| } | |
| @layer layout { | |
| #scene { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| perspective: 1100px; | |
| pointer-events: none; | |
| } | |
| #scroll_container { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| section { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| padding: 6rem calc(5rem + var(--ui-inset)) 6rem 5rem; | |
| } | |
| } | |
| @layer cube { | |
| #cube { | |
| --s: min(74vw, 74vh, 560px); | |
| width: var(--s); | |
| height: var(--s); | |
| position: relative; | |
| transform-style: preserve-3d; | |
| transform: rotateX(90deg) rotateY(0deg); | |
| will-change: transform; | |
| } | |
| .face { | |
| position: absolute; | |
| inset: 0; | |
| overflow: hidden; | |
| backface-visibility: hidden; | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| rgba(255, 255, 255, 0.02) 0, | |
| rgba(255, 255, 255, 0.02) 1px, | |
| transparent 1px, | |
| transparent 48px | |
| ), | |
| repeating-linear-gradient( | |
| 90deg, | |
| rgba(255, 255, 255, 0.02) 0, | |
| rgba(255, 255, 255, 0.02) 1px, | |
| transparent 1px, | |
| transparent 48px | |
| ), | |
| #14100d; | |
| img { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| display: block; | |
| } | |
| &:has(img) .face-ph { | |
| display: none; | |
| } | |
| } | |
| .face-ph { | |
| position: absolute; | |
| bottom: 1.5rem; | |
| left: 1.75rem; | |
| font-family: var(--font-display); | |
| font-size: clamp(2rem, 8vw, 5rem); | |
| letter-spacing: 0.04em; | |
| color: rgba(255, 255, 255, 0.06); | |
| pointer-events: none; | |
| user-select: none; | |
| } | |
| .face[data-face="front"] { | |
| transform: translateZ(calc(var(--s) / 2)); | |
| } | |
| .face[data-face="back"] { | |
| transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); | |
| } | |
| .face[data-face="right"] { | |
| transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); | |
| } | |
| .face[data-face="left"] { | |
| transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); | |
| } | |
| .face[data-face="top"] { | |
| transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); | |
| } | |
| .face[data-face="bottom"] { | |
| transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); | |
| } | |
| } | |
| @layer ui { | |
| #hud { | |
| position: fixed; | |
| top: var(--ui-inset); | |
| right: var(--ui-inset); | |
| z-index: var(--z-ui); | |
| text-align: right; | |
| font-size: 0.65rem; | |
| letter-spacing: 0.15em; | |
| color: var(--muted); | |
| text-transform: uppercase; | |
| .progress-bar { | |
| width: 7.5rem; | |
| height: var(--hairline); | |
| background: var(--muted); | |
| margin-block-start: 0.5rem; | |
| margin-inline-start: auto; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| position: absolute; | |
| inset-block: 0; | |
| inset-inline-start: 0; | |
| width: 0%; | |
| background: var(--accent); | |
| transition: width 0.1s linear; | |
| } | |
| .scene-label { | |
| font-size: 0.6rem; | |
| color: var(--accent); | |
| margin-block-start: 0.4rem; | |
| } | |
| } | |
| #scene_strip { | |
| position: fixed; | |
| left: var(--nav-x); | |
| top: 50%; | |
| translate: -50% -50%; | |
| z-index: var(--z-ui); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| .scene-dot { | |
| position: relative; | |
| display: block; | |
| width: 0.25rem; | |
| height: 0.25rem; | |
| border-radius: 50%; | |
| background: var(--muted); | |
| transition: background 0.3s, scale 0.3s; | |
| cursor: pointer; | |
| &::before { | |
| content: ""; | |
| position: absolute; | |
| inset: -0.2rem; | |
| } | |
| &.active { | |
| background: var(--accent); | |
| scale: 1.8; | |
| } | |
| } | |
| #theme_toggle { | |
| position: fixed; | |
| bottom: var(--ui-inset); | |
| left: var(--nav-x); | |
| translate: -50% 0; | |
| z-index: var(--z-ui); | |
| width: 2rem; | |
| height: 2rem; | |
| border: none; | |
| background: color-mix(in srgb, var(--muted) 35%, transparent); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: background 0.3s; | |
| &:hover { | |
| background: color-mix(in srgb, var(--muted) 55%, transparent); | |
| } | |
| svg { | |
| width: 0.875rem; | |
| height: 0.875rem; | |
| position: absolute; | |
| transition: opacity 0.3s ease, rotate 0.3s ease; | |
| color: var(--accent); | |
| } | |
| .icon-sun { | |
| opacity: 1; | |
| rotate: 0deg; | |
| } | |
| .icon-moon { | |
| opacity: 0; | |
| rotate: 90deg; | |
| } | |
| } | |
| #face_caption { | |
| position: fixed; | |
| bottom: var(--ui-inset); | |
| left: 50%; | |
| translate: -50% 0; | |
| z-index: var(--z-ui); | |
| text-align: center; | |
| pointer-events: none; | |
| user-select: none; | |
| } | |
| #face_caption_num { | |
| font-size: 0.58rem; | |
| letter-spacing: 0.28em; | |
| color: var(--accent); | |
| text-transform: uppercase; | |
| margin-block-end: 0.15rem; | |
| } | |
| #face_caption_name { | |
| font-family: var(--font-display); | |
| font-size: clamp(1.8rem, 5vw, 3.5rem); | |
| letter-spacing: 0.08em; | |
| color: var(--muted); | |
| opacity: 0.5; | |
| line-height: 1; | |
| } | |
| #credit { | |
| position: fixed; | |
| right: var(--ui-inset); | |
| top: 50%; | |
| transform: translateY(-50%) rotate(-90deg); | |
| transform-origin: right center; | |
| z-index: var(--z-ui); | |
| font-family: var(--font-mono); | |
| font-size: 0.65rem; | |
| letter-spacing: 0.15em; | |
| text-transform: uppercase; | |
| a { | |
| color: var(--muted); | |
| text-decoration: none; | |
| } | |
| } | |
| } | |
| @layer cards { | |
| .text-card { | |
| max-width: 23.75rem; | |
| padding: 2.25rem 2rem; | |
| background: var(--card-bg); | |
| border-left: var(--hairline) solid var(--card-border); | |
| backdrop-filter: blur(6px) saturate(120%); | |
| -webkit-backdrop-filter: blur(6px) saturate(120%); | |
| overflow: hidden; | |
| transition: background 0.3s ease, border-color 0.3s ease; | |
| &.right { | |
| margin-inline-start: auto; | |
| border-left: none; | |
| border-right: var(--hairline) solid var(--card-border); | |
| text-align: right; | |
| .h-line { | |
| transform-origin: right; | |
| margin-inline-start: auto; | |
| } | |
| } | |
| &.center { | |
| margin-inline: auto; | |
| border-left: none; | |
| border-top: var(--hairline) solid var(--card-border); | |
| text-align: center; | |
| max-width: 28.75rem; | |
| .h-line { | |
| transform-origin: center; | |
| margin-inline: auto; | |
| } | |
| } | |
| } | |
| .tag { | |
| font-size: 0.6rem; | |
| letter-spacing: 0.25em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| margin-block-end: 1.1rem; | |
| } | |
| :where(h1, h2) { | |
| font-family: var(--font-display); | |
| font-weight: 400; | |
| letter-spacing: 0.03em; | |
| line-height: 0.92; | |
| } | |
| h1 { | |
| font-size: clamp(3rem, 8vw, 6.5rem); | |
| } | |
| h2 { | |
| font-size: clamp(2.2rem, 5vw, 4rem); | |
| } | |
| .body-text { | |
| font-size: 0.78rem; | |
| line-height: 1.8; | |
| color: color-mix(in srgb, var(--fg) 55%, transparent); | |
| margin-block-start: 1.25rem; | |
| } | |
| .stat-row { | |
| display: flex; | |
| gap: 2.5rem; | |
| margin-block-start: 2rem; | |
| flex-wrap: wrap; | |
| } | |
| .stat { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.15rem; | |
| } | |
| .stat-num { | |
| font-family: var(--font-display); | |
| font-size: 2.2rem; | |
| color: var(--accent); | |
| line-height: 1; | |
| } | |
| .stat-label { | |
| font-size: 0.58rem; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| } | |
| .h-line { | |
| width: 3.125rem; | |
| height: var(--hairline); | |
| background: var(--accent); | |
| margin-block-end: 1.2rem; | |
| transform-origin: left; | |
| } | |
| .cta-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-start; | |
| gap: 0.75rem; | |
| margin-block-start: 1.75rem; | |
| } | |
| .text-card.right .cta-row { | |
| justify-content: flex-end; | |
| } | |
| .cta { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| padding: 0.6rem 1.25rem; | |
| border: var(--hairline) solid var(--accent); | |
| color: var(--accent); | |
| font-family: var(--font-mono); | |
| font-size: 0.62rem; | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| text-decoration: none; | |
| cursor: pointer; | |
| transition: background 0.2s, color 0.2s; | |
| &:hover { | |
| background: var(--accent); | |
| color: var(--bg); | |
| } | |
| svg { | |
| width: 0.6875rem; | |
| height: 0.6875rem; | |
| } | |
| } | |
| .cta-back { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| padding: 0.6rem 1.25rem; | |
| border: var(--hairline) solid | |
| color-mix(in srgb, var(--muted) 45%, transparent); | |
| color: var(--muted); | |
| font-family: var(--font-mono); | |
| font-size: 0.62rem; | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| text-decoration: none; | |
| transition: background 0.2s, color 0.2s, border-color 0.2s; | |
| &:hover { | |
| background: color-mix(in srgb, var(--muted) 12%, transparent); | |
| border-color: var(--muted); | |
| color: var(--fg); | |
| } | |
| svg { | |
| width: 0.6875rem; | |
| height: 0.6875rem; | |
| } | |
| } | |
| } | |
| @layer reveal { | |
| :is(.tag, h1, h2, .body-text, .stat-row, .cta, .cta-back) { | |
| opacity: 0; | |
| translate: 0 var(--reveal-offset); | |
| } | |
| :is(h1, h2) { | |
| translate: 0 1.125rem; | |
| transition: opacity var(--reveal-duration) ease 0.08s, | |
| translate var(--reveal-duration) ease 0.08s; | |
| } | |
| .tag { | |
| transition: opacity var(--reveal-duration) ease, | |
| translate var(--reveal-duration) ease; | |
| } | |
| .body-text { | |
| transition: opacity var(--reveal-duration) ease 0.2s, | |
| translate var(--reveal-duration) ease 0.2s; | |
| } | |
| .stat-row { | |
| transition: opacity var(--reveal-duration) ease 0.3s, | |
| translate var(--reveal-duration) ease 0.3s; | |
| } | |
| :is(.cta, .cta-back) { | |
| transition: opacity var(--reveal-duration) ease 0.35s, | |
| translate var(--reveal-duration) ease 0.35s, background 0.2s, color 0.2s, | |
| border-color 0.2s; | |
| } | |
| .h-line { | |
| opacity: 0; | |
| scale: 0 1; | |
| transition: opacity 0.4s ease, s | |
| <textarea id="init-data" style="display:none">{"__browser":{"country":"DE","device":"unknown_device","mobile":false,"name":"yandex","platform":"linux","version":"26"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"vmaLQk","name":"t-13-K+NxE9+ni8!.{{{{{((((..&amp;&amp;&amp;&amp;***..t-13-K+NxE9+ni8!*&amp;&","title":"t-13-K+NxE9+ni8!.{{{{{((((..&amp;&amp;&amp;&amp;***..t-13-K+NxE9+ni8!*&amp;&","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"vmaLQk","title":"t-13-K+NxE9+ni8!.{{{{{((((..&amp;&amp;&amp;&amp;***..t-13-K+NxE9+ni8!*&amp;&","name":"t-13-K+NxE9+ni8!.{{{{{((((..&amp;&amp;&amp;&amp;***..t-13-K+NxE9+ni8!*&amp;&","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"Max-Vors","__typename":"User"},"currentTeamId":null,"username":"Max-Vors","admin":false,"anon":false,"pro":false,"verified":true,"featureFlags":[],"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":false,"base_url":"/Max-Vors/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"vmaLQk","id":15027949,"itemType":"user","name":"t-13-K+NxE9+ni8!.{{{{{((((..&amp;&amp;&amp;&amp;***..t-13-K+NxE9+ni8!*&amp;&","paid":false,"tier":0,"username":"Max-Vors","created_at":"2025-07-22T11:36:15.496Z","email_verified":true,"collections_count":12,"collections_private_count":1,"followers_count":0,"followings_count":0,"pens_count":17,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoidm1hTFFrIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzc0NzY5NzEwLCJpYXQiOjE3NzQ3NjYxMTAsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6InZtYUxRayJ9.lPggf8HS6KndSGypiEclGgbXDq4s-fOF8dc1Qe1tXYHxydVyPp8fNIKV1Vuj26BF6rWPqneulzcSvEIcLjaOzvdSkht0SI8VIcERo13Re08-ZibPd6mdUAu3o3M1n3GGNpVNLc8J-ToQ_7TTX_CHxocHMPbP_7D7h4s16qp4IywobgQfi9OcpgUsAdit9pahfrjdCs1_hb_LyEWo06do5vrO2EfNFiUBaYwpUEQy7gQF2bLVSRwqxuUK-MAo0Rw12zwX6DPssVs8PDZgnixdbTDX5Vtb7mOCiY4xdDoY7hJLHn1bYrHKXzjmtuewQBodgUloEBWDl9lCTmMCMWZJmA"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__editor_config":{"id":"classic","editors":[{"id":"html","type":"html","name":"HTML","showEditor":true,"showSettings":true,"showProcessors":true,"embeds":{"showViewCompiled":true},"settings":[{"id":"processor","name":"HTML Preprocessor","type":"select","visible":true,"values":[{"id":"none","name":"None","value":"none","default":true},{"id":"haml","name":"Haml","value":"haml"},{"id":"markdown","name":"Markdown","value":"markdown"},{"id":"slim","name":"Slim","value":"slim"},{"id":"pug","name":"Pug","value":"pug"}]},{"id":"html_classes","name":"Add Class(es) to <html>","type":"input","placeholder":"e.g. single post post-1234","visible":true},{"id":"head","name":"Stuff for <head>","type":"textarea","placeholder":"e.g. <meta>, <link>, <script>","visible":true}],"actions":[{"id":"tidy_html","type":"tidy_code","name":"Format HTML","disabled_processors":["haml","slim"]},{"id":"view_compiled_html","type":"view_compiled","name":"View Compiled HTML","disabled_processors":["none"],"showInEmbeds":true},{"id":"analyze_html","type":"analyze","name":"Analyze HTML"},{"id":"maximize_html_editor","type":"maximize","name":"Maximize HTML Editor"},{"id":"minimize_html_editor","type":"minimize","name":"Minimize HTML Editor"},{"id":"fold_all_html","type":"fold_all","name":"Fold All"},{"id":"unfold_all_html","type":"unfold_all","name":"Unfold All"}],"processors":[{"id":"none","name":"None"},{"id":"haml","name":"Haml"},{"id":"markdown","name":"Markdown"},{"id":"slim","name":"Slim"},{"id":"pug","name":"Pug"}]},{"id":"css","type":"css","name":"CSS","showEditor":true,"showSettings":true,"showProcessors":true,"showVendorPrefixing":true,"embeds":{"showViewCompiled":true},"actions":[{"id":"tidy_css","type":"tidy_code","name":"Format CSS","disabled_processors":["sass","stylus"]},{"id":"view_compiled_css","type":"view_compiled","name":"View Compiled CSS","disabled_processors":["none"],"disabled_prefixes":["neither","prefixfree"]},{"id":"analyze_css","type":"analyze","name":"Analyze CSS"},{"id":"maximize_css_editor","type":"maximize","name":"Maximize CSS Editor"},{"id":"minimize_css_editor","type":"minimize","name":"Minimize CSS Editor"},{"id":"fold_all_css","type":"fold_all","name":"Fold All","disabled_processors":["sass"]},{"id":"unfold_all_css","type":"unfold_all","name":"Unfold All","disabled_processors":["sass"]}],"processors":[{"id":"none","name":"None"},{"id":"less","name":"Less"},{"id":"scss","name":"SCSS"},{"id":"sass","name":"Sass"},{"id":"stylus","name":"Stylus"},{"id":"postcss","name":"PostCSS"}],"parSuffixes":["less","scss","sass","styl"]},{"id":"js","type":"js","name":"JS","showEditor":true,"showSettings":true,"showProcessors":true,"detectImports":true,"externalResourcesHidden":false,"embeds":{"showViewCompiled":true},"actions":[{"id":"tidy_js","type":"tidy_code","name":"Format JavaScript","disabled_processors":["coffeescript, livescript"]},{"id":"view_compiled_js","type":"view_compiled","name":"View Compiled JavaScript","disabled_processors":["none"]},{"id":"analyze_js","type":"analyze","name":"Analyze JavaScript"},{"id":"maximize_js_editor","type":"maximize","name":"Maximize JavaScript Editor"},{"id":"minimize_js_editor","type":"minimize","name":"Minimize JavaScript Editor"},{"id":"fold_all_js","type":"fold_all","name":"Fold All"},{"id":"unfold_all_js","type":"unfold_all","name":"Unfold All"}],"processors":[{"id":"none","name":"None"},{"id":"babel","name":"Babel"},{"id":"typescript","name":"TypeScript"},{"id":"coffeescript","name":"CoffeeScript"},{"id":"livescript","name":"LiveScript"}]}],"formatters":[{"id":"classic","name":"Classic","runOn":[{"eventType":"demand"}],"url":"https://fi593g2v2a.execute-api.us-west-2.amazonaws.com/production/format"}],"layout":{"default":"top"},"linters":[{"id":"classic","name":"Classic","runOn":[{"eventType":"demand"}],"url":"https://fi593g2v2a.execute-api.us-west-2.amazonaws.com/production/lint"}],"preview":{"intervalMaxWaitMS":3500,"intervalMS":1200},"settings":[{"id":"behavior","name":"Behavior","type":"setting"},{"id":"editor","name":"Editor","type":"setting"}]},"__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"default_template\":null,\"emmet_active\":true,\"font_size\":\"15\",\"font_type\":\"system\",\"format_on_save\":true,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"ZYpyoRV\",\"auto_save\":true},\"hashid\":\"ZYpyoRV\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[\"scroll\",\"scrollsync\",\"cow\",\"reverse-creativity\"],\"id\":88247834,\"user_id\":573855,\"html\":\"<div id=\\\"scene\\\">\\n <div id=\\\"cube\\\">\\n <div class=\\\"face\\\" data-face=\\\"top\\\" data-i=\\\"0\\\"><span class=\\\"face-ph\\\">TOP</span></div>\\n <div class=\\\"face\\\" data-face=\\\"front\\\" data-i=\\\"1\\\"><span class=\\\"face-ph\\\">FRONT</span></div>\\n <div class=\\\"face\\\" data-face=\\\"right\\\" data-i=\\\"2\\\"><span class=\\\"face-ph\\\">RIGHT</span></div>\\n <div class=\\\"face\\\" data-face=\\\"back\\\" data-i=\\\"3\\\"><span class=\\\"face-ph\\\">BACK</span></div>\\n <div class=\\\"face\\\" data-face=\\\"left\\\" data-i=\\\"4\\\"><span class=\\\"face-ph\\\">LEFT</span></div>\\n <div class=\\\"face\\\" data-face=\\\"bottom\\\" data-i=\\\"5\\\"><span class=\\\"face-ph\\\">BOTTOM</span></div>\\n </div>\\n</div>\\n\\n<div id=\\\"hud\\\">\\n <div id=\\\"hud_pct\\\">000%</div>\\n <div class=\\\"progress-bar\\\">\\n <div class=\\\"progress-fill\\\" id=\\\"prog_fill\\\"></div>\\n </div>\\n <div class=\\\"scene-label\\\" id=\\\"scene_name\\\">DESCENT</div>\\n</div>\\n\\n<button id=\\\"theme_toggle\\\" aria-label=\\\"Toggle light/dark mode\\\">\\n <svg class=\\\"icon-sun\\\" viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\">\\n <circle cx=\\\"12\\\" cy=\\\"12\\\" r=\\\"4\\\" />\\n <path d=\\\"M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41\\\" />\\n </svg>\\n <svg class=\\\"icon-moon\\\" viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\">\\n <path d=\\\"M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z\\\" />\\n </svg>\\n</button>\\n\\n<div id=\\\"scene_strip\\\">\\n <a href=\\\"#s0\\\" class=\\\"scene-dot active\\\"></a>\\n <a href=\\\"#s1\\\" class=\\\"scene-dot\\\"></a>\\n <a href=\\\"#s2\\\" class=\\\"scene-dot\\\"></a>\\n <a href=\\\"#s3\\\" class=\\\"scene-dot\\\"></a>\\n <a href=\\\"#s4\\\" class=\\\"scene-dot\\\"></a>\\n <a href=\\\"#s5\\\" class=\\\"scene-dot\\\"></a>\\n</div>\\n\\n<div id=\\\"face_caption\\\">\\n <div id=\\\"face_caption_num\\\">01</div>\\n <div id=\\\"face_caption_name\\\">DESCENT</div>\\n</div>\\n\\n<div id=\\\"scroll_container\\\">\\n\\n <section id=\\\"s0\\\">\\n <div class=\\\"text-card\\\">\\n <div class=\\\"tag\\\">Cube Gallery — Bad Art</div>\\n <h1>WORK<br>AGAINST<br>THE MODEL</h1>\\n <p class=\\\"body-text\\\">\\n What happens when you ask AI\\n to do the opposite of what it was built for?\\n Break proportion. Flip symmetry.\\n Leave the mistakes in place.\\n Scroll to find out.\\n </p>\\n <div class=\\\"cta-row\\\">\\n <a class=\\\"cta\\\" href=\\\"#s1\\\">\\n Enter\\n <svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\">\\n <path d=\\\"M1 6h10M6 1l5 5-5 5\\\" />\\n </svg>\\n </a>\\n </div>\\n </div>\\n </section>\\n\\n <section id=\\\"s1\\\">\\n <div class=\\\"text-card right\\\">\\n <div class=\\\"h-line\\\"></div>\\n <div class=\\\"tag\\\">01 — Art Rebellion</div>\\n <h2>FLIP<br>THE<br>PROMPT</h2>\\n <p class=\\\"body-text\\\">\\n A cow walking a monster\\n instead of a monster walking a cow.\\n That inversion is enough\\n to break template thinking.\\n The cape ends up on the wrong body.\\n </p>\\n <div class=\\\"cta-row\\\">\\n <a class=\\\"cta-back\\\" href=\\\"#s0\\\">\\n <svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\">\\n <path d=\\\"M11 6H1M6 11L1 6l5-5\\\" />\\n </svg>\\n Back\\n </a>\\n <a class=\\\"cta\\\" href=\\\"#s2\\\">\\n Turn\\n <svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\">\\n <path d=\\\"M1 6h10M6 1l5 5-5 5\\\" />\\n </svg>\\n </a>\\n </div>\\n </div>\\n </section>\\n\\n <section id=\\\"s2\\\">\\n <div class=\\\"text-card\\\">\\n <div class=\\\"h-line\\\"></div>\\n <div class=\\\"tag\\\">02 — Moo Walk</div>\\n <h2>NEITHER<br>LEADS</h2>\\n <p class=\\\"body-text\\\">\\n Clashing colors. No balance.\\n A dance with no choreography.\\n When the model works against itself\\n something more genuine surfaces.\\n </p>\\n <div class=\\\"cta-row\\\">\\n <a class=\\\"cta-back\\\" href=\\\"#s1\\\">\\n <svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\">\\n <path d=\\\"M11 6H1M6 11L1 6l5-5\\\" />\\n </svg>\\n Back\\n </a>\\n <a class=\\\"cta\\\" href=\\\"#s3\\\">\\n Turn\\n <svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\">\\n <path d=\\\"M1 6h10M6 1l5 5-5 5\\\" />\\n </svg>\\n </a>\\n </div>\\n </div>\\n </section>\\n\\n <section id=\\\"s3\\\">\\n <div class=\\\"text-card right\\\">\\n <div class=\\\"h-line\\\"></div>\\n <div class=\\\"tag\\\">03 — Bad Art</div>\\n <h2>REVERSE<br>CREATIVITY</h2>\\n <p class=\\\"body-text\\\">\\n AI is trained to polish and regularize.\\n The harder direction is unlearning that.\\n A television for a head\\n is not an error.\\n It is the point.\\n </p>\\n <div class=\\\"stat-row\\\" style=\\\"justify-content: flex-end\\\">\\n <div class=\\\"stat\\\">\\n <span class=\\\"stat-num\\\">6</span>\\n <span class=\\\"stat-label\\\">Works</span>\\n </div>\\n <div class=\\\"stat\\\">\\n <span class=\\\"stat-num\\\">360</span>\\n <span class=\\\"stat-label\\\">Degrees</span>\\n </div>\\n <div class=\\\"stat\\\">\\n <span class=\\\"stat-num\\\">1</span>\\n <span class=\\\"stat-label\\\">Object</span>\\n </div>\\n </div>\\n <div class=\\\"cta-row\\\">\\n <a class=\\\"cta-back\\\" href=\\\"#s2\\\">\\n <svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\">\\n <path d=\\\"M11 6H1M6 11L1 6l5-5\\\" />\\n </svg>\\n Back\\n </a>\\n <a class=\\\"cta\\\" href=\\\"#s4\\\">\\n Turn\\n <svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\">\\n <path d=\\\"M1 6h10M6 1l5 5-5 5\\\" />\\n </svg>\\n </a>\\n </div>\\n </div>\\n </section>\\n\\n <section id=\\\"s4\\\">\\n <div class=\\\"text-card\\\">\\n <div class=\\\"h-line\\\"></div>\\n <div class=\\\"tag\\\">04 — No Rules</div>\\n <h2>NONSENSE<br>AT THE<br>CENTER</h2>\\n <p class=\\\"body-text\\\">\\n Dada and the surrealists knew this.\\n Put the absurd at the center\\n and the edges stop pretending.\\n Nine heads in the branches.\\n The sun has a face and it approves.\\n </p>\\n <div class=\\\"cta-row\\\">\\n <a class=\\\"cta-back\\\" href=\\\"#s3\\\">\\n <svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\">\\n <path d=\\\"M11 6H1M6 11L1 6l5-5\\\" />\\n </svg>\\n Back\\n </a>\\n <a class=\\\"cta\\\" href=\\\"#s5\\\">\\n Turn\\n <svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\">\\n <path d=\\\"M1 6h10M6 1l5 5-5 5\\\" />\\n </svg>\\n </a>\\n </div>\\n </div>\\n </section>\\n\\n <section id=\\\"s5\\\">\\n <div class=\\\"text-card right\\\">\\n <div class=\\\"h-line\\\"></div>\\n <div class=\\\"tag\\\">05 — Super Monsters</div>\\n <h2>RAW<br>NOT<br>POLISHED</h2>\\n <p class=\\\"body-text\\\">\\n Forward creativity takes a sketch\\n and makes it real.\\n This goes the other way.\\n Imperfection left in place\\n is closer to something honest.\\n </p>\\n <div class=\\\"cta-row\\\">\\n <a class=\\\"cta-back\\\" href=\\\"#s4\\\">\\n <svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\">\\n <path d=\\\"M11 6H1M6 11L1 6l5-5\\\" />\\n </svg>\\n Back\\n </a>\\n <a class=\\\"cta\\\" href=\\\"#s0\\\">\\n Begin again\\n <svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\">\\n <path d=\\\"M1 6h10M6 1l5 5-5 5\\\" />\\n </svg>\\n </a>\\n </div>\\n </div>\\n </section>\\n\\n</div>\\n\\n<div id=\\\"credit\\\">\\n <a href=\\\"https://www.linkedin.com/posts/luis-martinez-lr_ai-creativity-reversecreativity-activity-7366853269517651970-zeUD?utm_source=share&utm_medium=member_desktop&rcm=ACoAAFq1dzgByK1x_NMrcq582OMbK-_3q0DthYY\\\" target=\\\"_blank\\\" rel=\\\"noopener\\\">Reverse Creativity</a>\\n</div>\",\"css\":\"@import url(\\\"https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400&display=swap\\\");\\n\\n@layer reset, tokens, base, layout, cube, ui, cards, reveal, theme, responsive;\\n\\n@layer reset {\\n *,\\n *::before,\\n *::after {\\n box-sizing: border-box;\\n margin: 0;\\n padding: 0;\\n }\\n}\\n\\n@layer tokens {\\n :root {\\n color-scheme: dark;\\n\\n --dark-bg: #1c1814;\\n --dark-fg: #ede8df;\\n --dark-muted: #8a7b6e;\\n --light-bg: #f0ece3;\\n --light-fg: #0d0d14;\\n --light-muted: #9a9aaa;\\n --accent-dark: #d4a84b;\\n --accent-light: #3a6e00;\\n\\n --bg: var(--dark-bg);\\n --fg: var(--dark-fg);\\n --muted: var(--dark-muted);\\n --accent: var(--accent-dark);\\n\\n --font-display: \\\"Bebas Neue\\\", sans-s@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400&display=swap"); | |
| @layer reset, tokens, base, layout, cube, ui, cards, reveal, theme, responsive; | |
| @layer reset { | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| } | |
| @layer tokens { | |
| :root { | |
| color-scheme: dark; | |
| --dark-bg: #1c1814; | |
| --dark-fg: #ede8df; | |
| --dark-muted: #8a7b6e; | |
| --light-bg: #f0ece3; | |
| --light-fg: #0d0d14; | |
| --light-muted: #9a9aaa; | |
| --accent-dark: #d4a84b; | |
| --accent-light: #3a6e00; | |
| --bg: var(--dark-bg); | |
| --fg: var(--dark-fg); | |
| --muted: var(--dark-muted); | |
| --accent: var(--accent-dark); | |
| --font-display: "Bebas Neue", sans-serif; | |
| --font-mono: "DM Mono", monospace; | |
| --hairline: 0.0625rem; | |
| --ui-inset: 2rem; | |
| --card-bg: rgba(28, 24, 20, 0.82); | |
| --card-border: rgba(212, 168, 75, 0.2); | |
| --nav-x: calc(var(--ui-inset) + 0.125rem); | |
| --reveal-offset: 0.625rem; | |
| --reveal-duration: 0.5s; | |
| --z-ui: 10; | |
| } | |
| } | |
| @layer base { | |
| html { | |
| color-scheme: dark; | |
| } | |
| body { | |
| background: var(--bg); | |
| color: var(--fg); | |
| font-family: var(--font-mono); | |
| overflow-x: hidden; | |
| transition: background 0.3s ease, color 0.3s ease; | |
| } | |
| } | |
| @layer layout { | |
| #scene { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| perspective: 1100px; | |
| pointer-events: none; | |
| } | |
| #scroll_container { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| section { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| padding: 6rem calc(5rem + var(--ui-inset)) 6rem 5rem; | |
| } | |
| } | |
| @layer cube { | |
| #cube { | |
| --s: min(74vw, 74vh, 560px); | |
| width: var(--s); | |
| height: var(--s); | |
| position: relative; | |
| transform-style: preserve-3d; | |
| transform: rotateX(90deg) rotateY(0deg); | |
| will-change: transform; | |
| } | |
| .face { | |
| position: absolute; | |
| inset: 0; | |
| overflow: hidden; | |
| backface-visibility: hidden; | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| rgba(255, 255, 255, 0.02) 0, | |
| rgba(255, 255, 255, 0.02) 1px, | |
| transparent 1px, | |
| transparent 48px | |
| ), | |
| repeating-linear-gradient( | |
| 90deg, | |
| rgba(255, 255, 255, 0.02) 0, | |
| rgba(255, 255, 255, 0.02) 1px, | |
| transparent 1px, | |
| transparent 48px | |
| ), | |
| #14100d; | |
| img { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| display: block; | |
| } | |
| &:has(img) .face-ph { | |
| display: none; | |
| } | |
| } | |
| .face-ph { | |
| position: absolute; | |
| bottom: 1.5rem; | |
| left: 1.75rem; | |
| font-family: var(--font-display); | |
| font-size: clamp(2rem, 8vw, 5rem); | |
| letter-spacing: 0.04em; | |
| color: rgba(255, 255, 255, 0.06); | |
| pointer-events: none; | |
| user-select: none; | |
| } | |
| .face[data-face="front"] { | |
| transform: translateZ(calc(var(--s) / 2)); | |
| } | |
| .face[data-face="back"] { | |
| transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); | |
| } | |
| .face[data-face="right"] { | |
| transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); | |
| } | |
| .face[data-face="left"] { | |
| transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); | |
| } | |
| .face[data-face="top"] { | |
| transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); | |
| } | |
| .face[data-face="bottom"] { | |
| transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); | |
| } | |
| } | |
| @layer ui { | |
| #hud { | |
| position: fixed; | |
| top: var(--ui-inset); | |
| right: var(--ui-inset); | |
| z-index: var(--z-ui); | |
| text-align: right; | |
| font-size: 0.65rem; | |
| letter-spacing: 0.15em; | |
| color: var(--muted); | |
| text-transform: uppercase; | |
| .progress-bar { | |
| width: 7.5rem; | |
| height: var(--hairline); | |
| background: var(--muted); | |
| margin-block-start: 0.5rem; | |
| margin-inline-start: auto; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| position: absolute; | |
| inset-block: 0; | |
| inset-inline-start: 0; | |
| width: 0%; | |
| background: var(--accent); | |
| transition: width 0.1s linear; | |
| } | |
| .scene-label { | |
| font-size: 0.6rem; | |
| color: var(--accent); | |
| margin-block-start: 0.4rem; | |
| } | |
| } | |
| #scene_strip { | |
| position: fixed; | |
| left: var(--nav-x); | |
| top: 50%; | |
| translate: -50% -50%; | |
| z-index: var(--z-ui); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| .scene-dot { | |
| position: relative; | |
| display: block; | |
| width: 0.25rem; | |
| height: 0.25rem; | |
| border-radius: 50%; | |
| background: var(--muted); | |
| transition: background 0.3s, scale 0.3s; | |
| cursor: pointer; | |
| &::before { | |
| content: ""; | |
| position: absolute; | |
| inset: -0.2rem; | |
| } | |
| &.active { | |
| background: var(--accent); | |
| scale: 1.8; | |
| } | |
| } | |
| #theme_toggle { | |
| position: fixed; | |
| bottom: var(--ui-inset); | |
| left: var(--nav-x); | |
| translate: -50% 0; | |
| z-index: var(--z-ui); | |
| width: 2rem; | |
| height: 2rem; | |
| border: none; | |
| background: color-mix(in srgb, var(--muted) 35%, transparent); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: background 0.3s; | |
| &:hover { | |
| background: color-mix(in srgb, var(--muted) 55%, transparent); | |
| } | |
| svg { | |
| width: 0.875rem; | |
| height: 0.875rem; | |
| position: absolute; | |
| transition: opacity 0.3s ease, rotate 0.3s ease; | |
| color: var(--accent); | |
| } | |
| .icon-sun { | |
| opacity: 1; | |
| rotate: 0deg; | |
| } | |
| .icon-moon { | |
| opacity: 0; | |
| rotate: 90deg; | |
| } | |
| } | |
| #face_caption { | |
| position: fixed; | |
| bottom: var(--ui-inset); | |
| left: 50%; | |
| translate: -50% 0; | |
| z-index: var(--z-ui); | |
| text-align: center; | |
| pointer-events: none; | |
| user-select: none; | |
| } | |
| #face_caption_num { | |
| font-size: 0.58rem; | |
| letter-spacing: 0.28em; | |
| color: var(--accent); | |
| text-transform: uppercase; | |
| margin-block-end: 0.15rem; | |
| } | |
| #face_caption_name { | |
| font-family: var(--font-display); | |
| font-size: clamp(1.8rem, 5vw, 3.5rem); | |
| letter-spacing: 0.08em; | |
| color: var(--muted); | |
| opacity: 0.5; | |
| line-height: 1; | |
| } | |
| #credit { | |
| position: fixed; | |
| right: var(--ui-inset); | |
| top: 50%; | |
| transform: translateY(-50%) rotate(-90deg); | |
| transform-origin: right center; | |
| z-index: var(--z-ui); | |
| font-family: var(--font-mono); | |
| font-size: 0.65rem; | |
| letter-spacing: 0.15em; | |
| text-transform: uppercase; | |
| a { | |
| color: var(--muted); | |
| text-decoration: none; | |
| } | |
| } | |
| } | |
| @layer cards { | |
| .text-card { | |
| max-width: 23.75rem; | |
| padding: 2.25rem 2rem; | |
| background: var(--card-bg); | |
| border-left: var(--hairline) solid var(--card-border); | |
| backdrop-filter: blur(6px) saturate(120%); | |
| -webkit-backdrop-filter: blur(6px) saturate(120%); | |
| overflow: hidden; | |
| transition: background 0.3s ease, border-color 0.3s ease; | |
| &.right { | |
| margin-inline-start: auto; | |
| border-left: none; | |
| border-right: var(--hairline) solid var(--card-border); | |
| text-align: right; | |
| .h-line { | |
| transform-origin: right; | |
| margin-inline-start: auto; | |
| } | |
| } | |
| &.center { | |
| margin-inline: auto; | |
| border-left: none; | |
| border-top: var(--hairline) solid var(--card-border); | |
| text-align: center; | |
| max-width: 28.75rem; | |
| .h-line { | |
| transform-origin: center; | |
| margin-inline: auto; | |
| } | |
| } | |
| } | |
| .tag { | |
| font-size: 0.6rem; | |
| letter-spacing: 0.25em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| margin-block-end: 1.1rem; | |
| } | |
| :where(h1, h2) { | |
| font-family: var(--font-display); | |
| font-weight: 400; | |
| letter-spacing: 0.03em; | |
| line-height: 0.92; | |
| } | |
| h1 { | |
| font-size: clamp(3rem, 8vw, 6.5rem); | |
| } | |
| h2 { | |
| font-size: clamp(2.2rem, 5vw, 4rem); | |
| } | |
| .body-text { | |
| font-size: 0.78rem; | |
| line-height: 1.8; | |
| color: color-mix(in srgb, var(--fg) 55%, transparent); | |
| margin-block-start: 1.25rem; | |
| } | |
| .stat-row { | |
| display: flex; | |
| gap: 2.5rem; | |
| margin-block-start: 2rem; | |
| flex-wrap: wrap; | |
| } | |
| .stat { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.15rem; | |
| } | |
| .stat-num { | |
| font-family: var(--font-display); | |
| font-size: 2.2rem; | |
| color: var(--accent); | |
| line-height: 1; | |
| } | |
| .stat-label { | |
| font-size: 0.58rem; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| } | |
| .h-line { | |
| width: 3.125rem; | |
| height: var(--hairline); | |
| background: var(--accent); | |
| margin-block-end: 1.2rem; | |
| transform-origin: left; | |
| } | |
| .cta-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-start; | |
| gap: 0.75rem; | |
| margin-block-start: 1.75rem; | |
| } | |
| .text-card.right .cta-row { | |
| justify-content: flex-end; | |
| } | |
| .cta { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| padding: 0.6rem 1.25rem; | |
| border: var(--hairline) solid var(--accent); | |
| color: var(--accent); | |
| font-family: var(--font-mono); | |
| font-size: 0.62rem; | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| text-decoration: none; | |
| cursor: pointer; | |
| transition: background 0.2s, color 0.2s; | |
| &:hover { | |
| background: var(--accent); | |
| color: var(--bg); | |
| } | |
| svg { | |
| width: 0.6875rem; | |
| height: 0.6875rem; | |
| } | |
| } | |
| .cta-back { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| padding: 0.6rem 1.25rem; | |
| border: var(--hairline) solid | |
| color-mix(in srgb, var(--muted) 45%, transparent); | |
| color: var(--muted); | |
| font-family: var(--font-mono); | |
| font-size: 0.62rem; | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| text-decoration: none; | |
| transition: background 0.2s, color 0.2s, border-color 0.2s; | |
| &:hover { | |
| background: color-mix(in srgb, var(--muted) 12%, transparent); | |
| border-color: var(--muted); | |
| color: var(--fg); | |
| } | |
| svg { | |
| width: 0.6875rem; | |
| height: 0.6875rem; | |
| } | |
| } | |
| } | |
| @layer reveal { | |
| :is(.tag, h1, h2, .body-text, .stat-row, .cta, .cta-back) { | |
| opacity: 0; | |
| translate: 0 var(--reveal-offset); | |
| } | |
| :is(h1, h2) { | |
| translate: 0 1.125rem; | |
| transition: opacity var(--reveal-duration) ease 0.08s, | |
| translate var(--reveal-duration) ease 0.08s; | |
| } | |
| .tag { | |
| transition: opacity var(--reveal-duration) ease, | |
| translate var(--reveal-duration) ease; | |
| } | |
| .body-text { | |
| transition: opacity var(--reveal-duration) ease 0.2s, | |
| translate var(--reveal-duration) ease 0.2s; | |
| } | |
| .stat-row { | |
| transition: opacity var(--reveal-duration) ease 0.3s, | |
| translate var(--reveal-duration) ease 0.3s; | |
| } | |
| :is(.cta, .cta-back) { | |
| transition: opacity var(--reveal-duration) ease 0.35s, | |
| translate var(--reveal-duration) ease 0.35s, background 0.2s, color 0.2s, | |
| border-color 0.2s; | |
| } | |
| .h-line { | |
| opacity: 0; | |
| scale: 0 1; | |
| transition: opacity 0.4s ease, scale 0.4s ease; | |
| } | |
| :is(.tag, h1, h2, .body-text, .stat-row, .cta, .cta-back).visible { | |
| opacity: 1; | |
| translate: 0 0; | |
| } | |
| .h-line.visible { | |
| opacity: 1; | |
| scale: 1 1; | |
| } | |
| } | |
| @layer theme { | |
| :root[data-theme="light"] { | |
| color-scheme: light; | |
| --bg: var(--light-bg); | |
| --fg: var(--light-fg); | |
| --muted: var(--light-muted); | |
| --accent: var(--accent-light); | |
| --card-bg: rgba(240, 236, 227, 0.08); | |
| --card-border: rgba(58, 110, 0, 0.14); | |
| .face { | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| rgba(0, 0, 0, 0.05) 0, | |
| rgba(0, 0, 0, 0.05) 1px, | |
| transparent 1px, | |
| transparent 48px | |
| ), | |
| repeating-linear-gradient( | |
| 90deg, | |
| rgba(0, 0, 0, 0.05) 0, | |
| rgba(0, 0, 0, 0.05) 1px, | |
| transparent 1px, | |
| transparent 48px | |
| ), | |
| #ddd8cf; | |
| } | |
| .face-ph { | |
| color: rgba(0, 0, 0, 0.07); | |
| } | |
| #theme_toggle { | |
| svg { | |
| color: var(--fg); | |
| } | |
| .icon-sun { | |
| opacity: 0; | |
| rotate: -90deg; | |
| } | |
| .icon-moon { | |
| opacity: 1; | |
| rotate: 0deg; | |
| } | |
| } | |
| #face_caption_name { | |
| opacity: 0.35; | |
| } | |
| } | |
| } | |
| @layer responsive { | |
| @media (width <= 56.25em) { | |
| #hud { | |
| top: 1rem; | |
| right: 1rem; | |
| } | |
| #scene_strip { | |
| display: none; | |
| } | |
| #theme_toggle { | |
| bottom: 1rem; | |
| left: 1.25rem; | |
| translate: 0 0; | |
| } | |
| #face_caption { | |
| bottom: 1rem; | |
| } | |
| section { | |
| min-height: 150vh; | |
| align-items: flex-end; | |
| padding: 0 1.5rem 3.5rem; | |
| } | |
| #s0 { | |
| min-height: 100vh; | |
| align-items: center; | |
| padding: 4rem 1.5rem; | |
| } | |
| :is(.text-card, .text-card.right, .text-card.center) { | |
| max-width: 100%; | |
| padding: 1.5rem 1.25rem; | |
| } | |
| .body-text { | |
| line-height: 1.55; | |
| } | |
| .stat-row { | |
| gap: 1.5rem; | |
| margin-block-start: 1.25rem; | |
| } | |
| .cta-row { | |
| margin-block-start: 1.25rem; | |
| } | |
| } | |
| }<div id="scene"> | |
| <div id="cube"> | |
| <div class="face" data-face="top" data-i="0"><span class="face-ph">TOP</span></div> | |
| <div class="face" data-face="front" data-i="1"><span class="face-ph">FRONT</span></div> | |
| <div class="face" data-face="right" data-i="2"><span class="face-ph">RIGHT</span></div> | |
| <div class="face" data-face="back" data-i="3"><span class="face-ph">BACK</span></div> | |
| <div class="face" data-face="left" data-i="4"><span class="face-ph">LEFT</span></div> | |
| <div class="face" data-face="bottom" data-i="5"><span class="face-ph">BOTTOM</span></div> | |
| </div> | |
| </div> | |
| <div id="hud"> | |
| <div id="hud_pct">000%</div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="prog_fill"></div> | |
| </div> | |
| <div class="scene-label" id="scene_name">DESCENT</div> | |
| </div> | |
| <button id="theme_toggle" aria-label="Toggle light/dark mode"> | |
| <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <circle cx="12" cy="12" r="4" /> | |
| <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" /> | |
| </svg> | |
| <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z" /> | |
| </svg> | |
| </button> | |
| <div id="scene_strip"> | |
| <a href="#s0" class="scene-dot active"></a> | |
| <a href="#s1" class="scene-dot"></a> | |
| <a href="#s2" class="scene-dot"></a> | |
| <a href="#s3" class="scene-dot"></a> | |
| <a href="#s4" class="scene-dot"></a> | |
| <a href="#s5" class="scene-dot"></a> | |
| </div> | |
| <div id="face_caption"> | |
| <div id="face_caption_num">01</div> | |
| <div id="face_caption_name">DESCENT</div> | |
| </div> | |
| <div id="scroll_container"> | |
| <section id="s0"> | |
| <div class="text-card"> | |
| <div class="tag">Cube Gallery — Bad Art</div> | |
| <h1>WORK<br>AGAINST<br>THE MODEL</h1> | |
| <p class="body-text"> | |
| What happens when you ask AI | |
| to do the opposite of what it was built for? | |
| Break proportion. Flip symmetry. | |
| Leave the mistakes in place. | |
| Scroll to find out. | |
| </p> | |
| <div class="cta-row"> | |
| <a class="cta" href="#s1"> | |
| Enter | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M1 6h10M6 1l5 5-5 5" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="s1"> | |
| <div class="text-card right"> | |
| <div class="h-line"></div> | |
| <div class="tag">01 — Art Rebellion</div> | |
| <h2>FLIP<br>THE<br>PROMPT</h2> | |
| <p class="body-text"> | |
| A cow walking a monster | |
| instead of a monster walking a cow. | |
| That inversion is enough | |
| to break template thinking. | |
| The cape ends up on the wrong body. | |
| </p> | |
| <div class="cta-row"> | |
| <a class="cta-back" href="#s0"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M11 6H1M6 11L1 6l5-5" /> | |
| </svg> | |
| Back | |
| </a> | |
| <a class="cta" href="#s2"> | |
| Turn | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M1 6h10M6 1l5 5-5 5" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="s2"> | |
| <div class="text-card"> | |
| <div class="h-line"></div> | |
| <div class="tag">02 — Moo Walk</div> | |
| <h2>NEITHER<br>LEADS</h2> | |
| <p class="body-text"> | |
| Clashing colors. No balance. | |
| A dance with no choreography. | |
| When the model works against itself | |
| something more genuine surfaces. | |
| </p> | |
| <div class="cta-row"> | |
| <a class="cta-back" href="#s1"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M11 6H1M6 11L1 6l5-5" /> | |
| </svg> | |
| Back | |
| </a> | |
| <a class="cta" href="#s3"> | |
| Turn | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M1 6h10M6 1l5 5-5 5" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="s3"> | |
| <div class="text-card right"> | |
| <div class="h-line"></div> | |
| <div class="tag">03 — Bad Art</div> | |
| <h2>REVERSE<br>CREATIVITY</h2> | |
| <p class="body-text"> | |
| AI is trained to polish and regularize. | |
| The harder direction is unlearning that. | |
| A television for a head | |
| is not an error. | |
| It is the point. | |
| </p> | |
| <div class="stat-row" style="justify-content: flex-end"> | |
| <div class="stat"> | |
| <span class="stat-num">6</span> | |
| <span class="stat-label">Works</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-num">360</span> | |
| <span class="stat-label">Degrees</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-num">1</span> | |
| <span class="stat-label">Object</span> | |
| </div> | |
| </div> | |
| <div class="cta-row"> | |
| <a class="cta-back" href="#s2"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M11 6H1M6 11L1 6l5-5" /> | |
| </svg> | |
| Back | |
| </a> | |
| <a class="cta" href="#s4"> | |
| Turn | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M1 6h10M6 1l5 5-5 5" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="s4"> | |
| <div class="text-card"> | |
| <div class="h-line"></div> | |
| <div class="tag">04 — No Rules</div> | |
| <h2>NONSENSE<br>AT THE<br>CENTER</h2> | |
| <p class="body-text"> | |
| Dada and the surrealists knew this. | |
| Put the absurd at the center | |
| and the edges stop pretending. | |
| Nine heads in the branches. | |
| The sun has a face and it approves. | |
| </p> | |
| <div class="cta-row"> | |
| <a class="cta-back" href="#s3"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M11 6H1M6 11L1 6l5-5" /> | |
| </svg> | |
| Back | |
| </a> | |
| <a class="cta" href="#s5"> | |
| Turn | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M1 6h10M6 1l5 5-5 5" /> | |
| </svg> | |
| </a> | |
| </div>wdEWs | |
| </div> | |
| </section> | |
| <section id="s5"> | |
| <div class="text-card right"> | |
| <div class="h-line"></div> | |
| <div class="tag">05 — Super Monsters</div> | |
| <h2>RAW<br>NOT<br>POLISHED</h2> | |
| <p class="body-text"> | |
| Forward creativity takes a sketch | |
| and makes it real. | |
| This goes the other way. | |
| Imperfection left in place | |
| is closer to something honest. | |
| </p> | |
| <div class="cta-row"> | |
| <a class="cta-back" href="#s4"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M11 6H1M6 11L1 6l5-5" /> | |
| </svg> | |
| Back | |
| </a> | |
| <a class="cta" href="#s0"> | |
| Begin again | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <path d="M1 6h10M6 1l5 5-5 5" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <div id="credit"> | |
| <a href="https://www.linkedin.com/posts/luis-martinez-lr_ai-creativity-reversecreativity-activity-7366853269517651970-zeUD?utm_source=share&utm_medium=member_desktop&rcm=ACoAAFq1dzgByK1x_NMrcq582OMbK-_3q0DthYY" target="_blank" rel="noopener">Reverse Creativity</a> | |
| </div>body { | |
| padding: 2rem; | |
| font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif; | |
| } | |
| h1 { | |
| font-size: 16px; | |
| margin-top: 0; | |
| } | |
| p { | |
| color: rgb(107, 114, 128); | |
| font-size: 15px; | |
| margin-bottom: 10px; | |
| margin-top: 5px; | |
| } | |
| .card { | |
| max-width: 620px; | |
| margin: 0 auto; | |
| padding: 16px; | |
| border: 1px solid lightgray; | |
| border-radius: 16px; | |
| } | |
| .card p:last-child { | |
| margin-bottom: 0; | |
| } | |
| ⚠️ No matches found.Phase 1: Anforderungsanalyse & Konzept (≈ Kalenderwoche 1–2) | |
| Stakeholder-Workshops zur Klärung von Use-Cases (Meditation, Binaural-Beats, Therapiesounds usw.) | |
| Definition der Grund-Frequenzfamilien (z. B. 40 Hz-Delta, 100 Hz-Alpha, 528 Hz-Solfeggio) und der „G-Sounds“ | |
| Mathematisches Modell wählen: Gleichungen für Takt f(t)=g·sin(2πt/τ)+Δ, Lautstärke A(t)=β·|sin(φt)| | |
| Festlegen der Stereo-Strategie (Rechts-Links-Phasenversatz, Tangens-/Rechteck-Modulation) | |
| Technologiestack beschließen (WebAudio API + Tone.js, optional WASM + DSP-Lib, Framework: SvelteKit/Next.js) | |
| Phase 2: Core-DSP-Engine (≈ KW 3–4) | |
| Programmierung eines polyphonen Grundfrequenz-Oszillators (Sine, Triangle, Square, Custom-FFT) | |
| Implementierung des mathematischen Takt-Generators (variable τ, BPM-Sync, Odd/Even-Subdivision) | |
| Lautstärke-Hüllkurven-Modul (ADSR, Log vs. Linear, Tangens-Shaping) | |
| Echtzeit-Routing in Stereo-Bus: Rechts-/Links-Gain-Nodes, dynamischer Pan-Law-Korrektor | |
| Benchmarking im Browser (Worklet) vs. Node/WASM; Latenz < 5 ms sicherstellen | |
| Phase 3: Adaptive Takt- & Lautstärkesteuerung (≈ KW 5–6) | |
| Algorithmus für „wechselnde Grund-G-Sounds“: periodische Parameter-Morphing-Matrix | |
| KI-gestützte Takt-Vorhersage (Markov/MLP) für fließende Übergänge ohne Klicks | |
| Dynamikprozessor (Compressor, Expander) auf Basis der berechneten Lautstärkekurven | |
| Implementierung einer Tangens-/Rechteck-Mischen-Funktion (tan(x) → harter Sync, rect(x) → Gate) | |
| MIDI/OSC-Input anbinden, um externe Controller für BPM & Volume zu nutzen | |
| Phase 4: UI/UX & Visualisierung (≈ KW 7–8) | |
| Responsive GUI: Multi-Slider für Grundfrequenz, BPM, Pan, Dynamik; Preset-Picker | |
| Canvas/WebGL-Scope: Echtzeit-Anzeige der Wellenform + FFT-Spectrogramm (links / rechts getrennt) | |
| Color-Coding nach Psychoakustik (hell = höher, dunkel = tiefer; alpha = Lautstärke) | |
| Live-Preview-Recorder (WebM/OGG) mit automatischer Dateibenennung nach Parametern | |
| Accessibility-Check (Keyboard-Nutzung, ARIA-Labels, Kontrast-Ratios) | |
| Phase 5: Testing, Optimierung & Deployment (≈ KW 9–10) | |
| Unit- & Integration-Tests (Jest/WebAudio-Test-Harness) für DSP-Bausteine | |
| Cross-Browser-Profiling (Chrome / Firefox / Safari / Edge, Mobil & Desktop) | |
| Progressive Web App-Build mit Offline-Caching der DSP-Worklets | |
| CI/CD-Pipeline (GitHub Actions → Vercel/Netlify) mit automatischem Version-Tagging | |
| Release v1.0, Feedback-Loop mit Early-Adopters, Bug-Backlog anlegen | |
| Phase 6: Erweiterungen & Roadmap (≈ KW 11 +) | |
| Binaural-Beat-Mode: Frequenzdifferenz Δf dynamisch = tan(θt) | |
| Preset-Community-Sharing via Cloud-Firestore | |
| Mehrkanal-Ambisonics-Export & Spatial-Audio-SDK-Support | |
| Integration eines ML-Timbral-Style-Transfer (z. B. DiffusionDSP) | |
| Mobile-Native-Wrapper (Capacitor/Electron) für Offline-TherapiesessionsM1: Projektinitialisierung & Architektur | |
| initProject()**: Git-Repository, README, Issue-Vorlagen anlegen | |
| selectStack()**: WebAudio API + Tone.js, Vite, TypeScript, SvelteKit definieren | |
| createModuleSkeleton()**: Ordner /src/dsp, /src/ui, /src/utils, /tests erzeugen | |
| designDataModel()**: Typen für OscConfig, Envelope, Sequence, Preset festlegen | |
| setupCI()**: GitHub Actions für Lint, Build, Unit-Tests einrichten | |
| roadmap.md**: Meilensteine & Release-Plan dokumentieren | |
| M2: DSP-Kernmodul – Oszillatoren & Taktberechnung | |
| createOscBank()**: Mehrstimmige Sin, Tri, Saw, Square-Oszillatoren instanziieren | |
| calcBeatPeriod()**: τ = 60 000 ms / BPM berechnen | |
| gSoundMorph()**: Grundton-Matrix zyklisch morphen (Array) | |
| buildStereoPan()**: Rechts-/Links-Gain-Nodes mit Phasenversatz verknüpfen | |
| scheduleClock()**: AudioWorklet-Clock mit < 5 ms Jitter starten | |
| benchmarkDSP()**: Latenz & CPU-Load in devtools-Profiler loggen | |
| M3: Dynamik- & Lautstärkemanagement | |
| makeEnvelope()**: ADSR-Generator (Attack, Decay, Sustain, Release) erstellen | |
| tanShaper()**: Tangens-Kurve für harte Peaks implementieren | |
| rectGate()**: Rechteck-Gate für Staccato-Effekte codieren | |
| autoCompressor()**: Threshold, Ratio, Knee adaptiv aus Eingangspegel ableiten | |
| panLawCorrect()**: -3 dB Pan-Law in Echtzeit ausgleichen | |
| linkMidiCC()**: Lautstärke- & Pan-Parameter an MIDI-Controller binden | |
| M4: Interaktive Benutzeroberfläche & Visualisierung | |
| renderSliders()**: Svelte-Komponenten für BPM, Frequenz, Pan, Dynamik | |
| drawWaveScope()**: Canvas-Realtime-Wellenform (links / rechts) anzeigen | |
| showFFT()**: WebGL-Spectrogramm mit Farbverlauf nach Amplitude rendern | |
| presetPicker()**: Dropdown mit Factory-Presets & User-Presets verbinden | |
| liveRecorder()**: MediaRecorder-Wrapper für WAV/OGG-Export implementieren | |
| a11yAudit()**: ARIA-Labels, Kontrast und Keyboard-Nav prüfen | |
| M5: Persistenz, Presets & Externe Schnittstellen | |
| savePreset()**: JSON-Blob in IndexedDB speichern | |
| loadPreset()**: Preset-Daten in UI & DSP injizieren | |
| sharePresetLink()**: Preset → base64 → URL-Parameter konvertieren | |
| oscServer()**: WebSocket-OSC-Bridge für Remote-BPM-Steuerung eröffnen | |
| exportAmbisonics()**: 4-Kanal-B-Format-Render in WAV schreiben | |
| mlPredictNextBeat()**: TensorFlow.js-Modell für Markov-Beat-Forecast laden | |
| M6: Testing, Packaging & Deployment | |
| unitTests()**: Jest + @web-audio-api/karma für DSP-Funktionen | |
| e2eTests()**: Playwright-Skripte für UI-Flows aufnehmen | |
| bundleApp()**: Vite → PWA-Bundle mit Workbox-Cache generieren | |
| versionTag()**: SemVer & Git-Tag bei jedem Merge-Commit setzen | |
| deployProd()**: Vercel-Pipeline – Preview → Staging → Main veröffentlichen | |
| collectFeedback()**: In-App-Formular, GitHub-Discussions verlinkenM7: Audio-Effekte & Modulations-Matrix | |
| addReverb()**: Faltungshall mit auswählbaren IR-Files (Cathedral, Plate, Spring) | |
| buildDelayRack()**: Ping-Pong-, Tape- & Granular-Delay als Parallel-Bus realisieren | |
| createModMatrix()**: GUI-Routing von LFO → (any DSP-Param) via Drag-&-Drop | |
| lfoBank()**: Sin/Noise/Ramp-LFOs mit Tempo-Sync und Phasen-Offset erzeugen | |
| sideChainComp()**: Ducking-Compressor; Trigger = Kick-Envelope aus calcBeatPeriod() | |
| dynamicEQ()**: 4-Band-EQ, Gain an Lautstärke-Kurve koppeln | |
| M8: Mobile- & Hardware-Integration | |
| capacitorWrap()**: iOS/Android-Build inkl. Background-Audio-Permission | |
| bluetoothMidi()**: Web-BLE ↔ MIDI-Controller (Korg Nano, Launchpad) anbinden | |
| gyroPan()**: DeviceOrientation → buildStereoPan() für Head-Tracking nutzen | |
| hapticsPulse()**: Vibration API; Beats > -10 dB triggert kurzen Impuls | |
| offlineWasm()**: DSP-Worklets per Lazy-Load in Cache Storage sichern | |
| pushUpdates()**: Service-Worker + Background Sync für Silent-Code-Patches | |
| M9: Dokumentation & Community | |
| generateDocs()**: TypeDoc → static site /docs mit Live-Code-Snippets | |
| tutorialWizard()**: Geführtes Overlay, erklärt renderSliders(), presetPicker() | |
| examplePresets()**: 20 Factory-JSONs als Lernmaterial publizieren | |
| communityHub()**: Firebase + GitHub OAuth für Preset-Sharing & Voting | |
| changelog.md**: Automatisch aus Git-Commits via Conventional Commits füllen | |
| translationI18n()**: i18next-Setup (EN, DE, ES, JP) für UI-Strings | |
| M10: Post-Launch-Optimierung & Roadmap | |
| usageAnalytics()**: Plausible API; Events = play, savePreset(), sharePresetLink() | |
| perfAudit()**: Lighthouse CI; Ziel > 90 Punkte Performance / PWA | |
| autoUpdater()**: diff-Aware Patch-Download beim Service-Worker-Install | |
| roadmapV2()**: Multichannel 7.1, binaural-Beat-Auto-Composer, AI-Mood Detection | |
| partnerAPIs()**: Spotify-Tempo-Sync, Ableton Link, WebMidiExport() | |
| fundingPlan()**: Open Collective + MIT-Licence dual (commercial addons)M11: Compliance & Accessibility | |
| wcagAudit(): Automatisierten WCAG-2.2-Check via axe-core nightly ausführen | |
| prefersReducedMotion(): Animationsintensität an OS-Setting koppeln | |
| highContrastMode(): CSS-Variable --theme-contrast dynamisch justieren | |
| screenReaderHints(): aria-live-Regionen für calcBeatPeriod()-Änderungen einbauen | |
| gdprConsent(): Opt-in-Dialog; usageAnalytics() erst nach Zustimmung aktivieren | |
| licenseScanner(): OSS-Lizenzen aller npm-Pakete per license-checker in build einbetten | |
| M12: Advanced AI & Adaptive Composition | |
| mlRhythmSuggest(): LSTM-Modell, das userTap()-Events in Sequenzen umwandelt | |
| ganToneStyle(): DiffusionDSP-Backend transformiert createOscBank()-Klangfarbe live | |
| autoDynamicMix(): Reinforcement-Agent optimiert tanShaper()-Parameter pro Track | |
| emotionDetect(): Webcam-Analyse → BPM & gSoundMorph() an Gesichtsemotion anpassen | |
| voiceCommand(): WebSpeech → “Increase depth” mappt auf addReverb() size++ | |
| latentPresetSearch(): Preset-Embedding (UMAP) liefert Ähnlichkeitsvorschau im presetPicker() | |
| M13: Marketplace & Plugin-API | |
| registerPlugin(): Externen JS-Bundle via importmap in createModMatrix() einschleusen | |
| pluginSandbox(): WebAssembly-Boundary schützt coreDSP() vor Rogue-Code | |
| revShareCalc(): Stripe-Connect: 80 % Creator / 20 % Plattform automatisch verrechnen | |
| pluginRating(): communityHub() erweitert um Fünf-Sterne-System & abuseReport() | |
| autoUpdatePlugin(): Service-Worker diff-Patch lädt neueste Version im Hintergrund | |
| devDocsSDK(): OpenAPI-Spec + TypeScript-d.ts für externes DSP-Interface generieren | |
| M14: Skalierung & Cloud-Services | |
| renderFarmQueue(): Server-Side-WASM-Nodes für lange exportAmbisonics()-Jobs | |
| edgeCacheIR(): CDN-Verteilung der Reverb-IR-Files per WASABI-Edge | |
| multiUserJam(): WebRTC-Mesh; scheduleClock() synchronisiert via NTP + jitterBuffer() | |
| dbShardPreset(): Firestore → Spanner-Migration bei >1 Mio Presets | |
| kpiDashboard(): Grafana-Cloud streamt usageAnalytics()-Metriken in Echtzeit | |
| disasterBackup(): Automated GCS-Snapshots; licenseScanner()-Hash für Integrity-CheckM15: Domain-Setup & PWA-Packaging | |
| claimDomain()**: Registriere app.window.app oder alternative TLD; setze A/AAAA-Records → Vercel/Netlify | |
| enableHTTPS()**: Auto-Let’s-Encrypt-Zertifikat; HSTS-Header max-age = 63072000 | |
| pwaManifest()**: name, short_name, icons (192/512 px), scope “/”, start_url “/#app” | |
| serviceWorker()**: Workbox strategies – static: CacheFirst, audio-chunks: StaleWhileRevalidate | |
| viteBasePath()**: base = “/”; resolve 404 → SPA-fallback index.html | |
| M16: Fehler „webpage not found“ beheben | |
| dnsCheck()**: dig app.window.app → propagation? TTL ≤ 300 s | |
| firewallRules()**: Port 443 inbound/outbound; Cloudflare „Orange-cloud“ auf DNS-only stellen, wenn WS-upgrade | |
| routerRedirect()*: Server-rewrite / → /index.html, damit „/#app“-Hash-Routes aufgelöst werden | |
| healthEndpoint()**: /api/health returns 200 OK; Monitor mit UptimeRobot 30 s-Interval | |
| accessLogAudit()**: 404-Hits korrelieren mit targetPath, um fehlende Assets nachzuziehen | |
| M17: Security Hardening & Compliance-Finish | |
| cspHeader()*: default-src ‘self’; connect-src wss://, https://api.stripe.com | |
| subresourceIntegrity()**: Vite-plugin-sri erzeugt SHA-256-Hashes für CDN-JS/CSS | |
| rateLimit()**: Cloudflare Rules (1000 req/min/IP) auf /api/, /ws/ | |
| owaspScan()**: ZAP Baseline in GitHub Action; Medium+ Findings block merge | |
| dataDeletion()**: GDPR „Forget Me“ API-Route; delete IndexedDB + Cloud records | |
| M18: Launch-Preparation & Marketing | |
| betaInvite()**: SendGrid-Blast → waitlist.csv; magic-link login via Firebase | |
| promoVideo()**: 45 s Screen-Capture zeigt gSoundMorph(), liveRecorder(), sharePresetLink() | |
| productHunt()**: Schedule “Coming Soon” page; prepare FAQ & founders’ comments | |
| pressKit()**: Logo-PNG, App-Icon, 1080×1920 mockups, one-pager PDF | |
| feedbackLoop()**: In-app NPS widget; GitHub Discussion auto-post on score < 7 | |
| M19: Final Release & Post-Launch SLA | |
| releaseCandidate()**: tag v1.0.0-rc; freeze new features, bug-fix only | |
| blueGreenDeploy()**: Vercel Preview → /green; traffic shift 10 % → 100 % after 24 h no errors | |
| statusPage()**: status.window.app powered by BetterUptime; Webhook on GitHub releases | |
| slaPolicy()**: P1 ≤ 2 h, P2 ≤ 8 h, P3 next sprint; auto-pager rotation via OpsGenie | |
| roadmapPublic()**: GitHub Projects board; label future issues “v1.1 binaural-composer”, “v2 multi-user-jam”Er arbeite nun einen speech to text und text to speech Analyse und Wiedergabe Generator der auf der Grundlage von der binauralen Musik die Stimme manipuliert in Form von hacken und distortionM20: Speech-to-Text-Pipeline (sttPipeline()) | |
| selectSttModel(): Whisper-cpp + WASM / Coqui-STT fallback | |
| initAudioInput(): WebRTC getUserMedia → 16 kHz mono stream | |
| rnNoiseGate(): Real-time noise-suppression before encoder | |
| chunkEncoder(): 1 s Opus frames → SharedArrayBuffer to Worklet | |
| decodeWhisper(): async STT inference, return word-level timestamps | |
| alignBeatMap(): map timestamps ↔ calcBeatPeriod() for later FX-sync | |
| M21: Text-to-Speech-Pipeline (ttsPipeline()) | |
| selectTtsModel(): VITS — multi-speaker; fallback = Google Web Speech | |
| cloneVoice(): few-shot voice ID enrolment; store in IndexedDB | |
| ssmlEnhance(): Insert || tags per BPM | |
| synthBinaural(): Render stereo buffers; left-right Δf = current ΔBinaural | |
| streamToAudioNode(): TTS output -> ttsGainNode → masterBus | |
| registerVoicePreset(): savePreset() extension for voice parameters | |
| M22: Voice-Manipulation-Engine (fxVoiceHack()) | |
| glitchLfoBank(): random stutter, gate, reverse-slice; sync = scheduleClock() | |
| bitCrushNode(): downsample 4–12 bit; depth → gSoundMorph() amplitude | |
| tanDistort(): tanShaper() reuse, drive tied to liveEnvelope() peak | |
| spectralShift(): FFT-bin transpose ±50 ct for binaural detune layer | |
| autoSideChain(): voice ducked when binauralKick hits –6 dB | |
| fxRouter(): drag-and-drop in createModMatrix() assigns FX order | |
| M23: UI & Integration (uiVoicePanel()) | |
| micButton(): start/stop sttPipeline(); LED-ring shows VU level | |
| transcriptArea(): live editable; onChange → ttsPipeline() re-speak | |
| fxPad(): XY-pad (Glitch ↔ Crush, Distort ↔ Shift) writes to fxVoiceHack() | |
| binauralSyncToggle(): binds synthBinaural() & autoSideChain() | |
| exportCombo(): liveRecorder() mixdown → “voiceHack-${BPM}.wav” | |
| unitTests(): jest-mock-audio-ctx for stt/tts/fx nodes; Playwright E2E for UI | |
| M24: Deployment & Metrics (voiceOps()) | |
| edgeCacheModels(): Whisper & VITS ggml files on CDN-ESM; SRI hashes | |
| wasmWarmup(): serviceWorker pre-warms stt/tts WASM on install | |
| analyticsVoice(): event = “fxVoiceHack”, props {bits, drive, stutterRate} | |
| errorSentry(): capture unhandledRejection in Worklet scope | |
| slaVoiceP1(): crashLoop < 2 h; auto-rollback via blueGreenDeploy()Die Entwicklung dieser Anwendung ist weit mehr als das reine Zusammenfügen moderner Frameworks und DSP-Algorithmen – sie ist ein kooperatives Abenteuer, bei dem Design-, Audio- und AI-Expert:innen fortwährend voneinander lernen. Durch den konsequenten Einsatz offener Standards (WebAudio, WebAssembly, PWA-Spezifikationen) entsteht ein technisches Fundament, auf dem sich Ideen flexibel und wartbar entfalten lassen. Das vertikale 9∶16-Layout spielt hierbei eine doppelte Rolle: Einerseits nutzt es den heute dominierenden „Vertical-First“-Nutzungsmodus mobiler Devices optimal aus, andererseits bildet es eine klare gestalterische Leitplanke, die komplexe Audio-Workflows auf das Wesentliche reduziert und so eine verlässliche mentale Komfortzone schafft. Bedienelemente werden ergonomisch entlang natürlicher Daumen- und Fingerbewegungen angeordnet, Animationen bleiben dezent, damit sie die Konzentration nicht stören, und adaptive Panels blenden sich exakt dann ein, wenn sie benötigt werden – niemals früher, niemals später. | |
| Diese Mischung aus technischer Stringenz und bewusstem Minimalismus schafft Raum für echte Kreativität: Sound-Designer können sich auf den Ausdruck konzentrieren, Frontend-Entwickler:innen auf Performance-Details, und UX-Gestalter:innen auf eine taktile Nutzerführung, die auch bei längeren Sessions weder ermüdet noch ablenkt. Gleichzeitig eröffnet die modulare Architektur eine Kultur des Teilens: Presets, Effekte und sogar Code-Snippets lassen sich per Drag-and-Drop oder URL-Share in Echtzeit austauschen, wodurch ein kollaboratives Ökosystem entsteht, das weit über die Grenzen eines einzelnen Projekts hinausreicht. So fusionieren Technologie und Layout zu einer lebendigen Plattform, in der Inspiration sofort umsetzbar ist und jede Verbesserung allen zugutekommt – eine digitale Werkstatt, die ihre Nutzer nicht einschränkt, sondern beflügelt. |