Arnie via Claude
123 lines
6.8 KiB
HTML
123 lines
6.8 KiB
HTML
<h2>More abstract — protrudes into room space</h2>
|
|
<p class="subtitle">Pieces extend outward from corner (x+y axis), not just flat trim</p>
|
|
|
|
<div class="cards">
|
|
|
|
<div class="card" data-choice="twist" onclick="toggleSelect(this)">
|
|
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:180px;overflow:hidden;">
|
|
<svg width="120" height="160" viewBox="0 0 120 160">
|
|
<!-- top-down hint showing corner + protrusion -->
|
|
<text x="6" y="14" fill="#555" font-size="9" font-family="monospace">top view →</text>
|
|
<!-- wall lines -->
|
|
<line x1="10" y1="20" x2="10" y2="155" stroke="#333" stroke-width="2"/>
|
|
<line x1="10" y1="20" x2="110" y2="20" stroke="#333" stroke-width="2"/>
|
|
<!-- twisted ribbon protruding diagonally -->
|
|
<path d="M10,20 Q40,35 55,55 Q70,75 60,100 Q50,125 65,145" fill="none" stroke="#7c3aed" stroke-width="4" stroke-linecap="round"/>
|
|
<path d="M10,20 Q45,30 65,48 Q85,66 75,90 Q65,115 80,135" fill="none" stroke="#a78bfa" stroke-width="2" stroke-linecap="round" stroke-dasharray="4,3"/>
|
|
<!-- cross sections showing twist -->
|
|
<ellipse cx="55" cy="55" rx="12" ry="5" fill="none" stroke="#7c3aed" stroke-width="1" transform="rotate(-30 55 55)"/>
|
|
<ellipse cx="60" cy="100" rx="12" ry="5" fill="none" stroke="#7c3aed" stroke-width="1" transform="rotate(20 60 100)"/>
|
|
<circle cx="10" cy="20" r="4" fill="#7c3aed"/>
|
|
</svg>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>Twisted Spine</h3>
|
|
<p>Ribbon or helix that spirals out from corner as it rises. Each 25cm piece is one full twist. Dramatic shadow play.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-choice="wave" onclick="toggleSelect(this)">
|
|
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:180px;overflow:hidden;">
|
|
<svg width="120" height="160" viewBox="0 0 120 160">
|
|
<text x="6" y="14" fill="#555" font-size="9" font-family="monospace">top view →</text>
|
|
<line x1="10" y1="20" x2="10" y2="155" stroke="#333" stroke-width="2"/>
|
|
<line x1="10" y1="20" x2="110" y2="20" stroke="#333" stroke-width="2"/>
|
|
<!-- wave peaks alternating x/y -->
|
|
<path d="M10,30 Q50,30 50,50 Q50,70 10,70 Q50,70 50,90 Q50,110 10,110 Q50,110 50,130 Q50,150 10,150" fill="none" stroke="#0891b2" stroke-width="3"/>
|
|
<path d="M10,30 Q10,60 30,60 Q10,60 10,90 Q10,90 30,90 Q10,90 10,120 Q10,120 30,120" fill="none" stroke="#22d3ee" stroke-width="1.5" stroke-dasharray="3,3"/>
|
|
<!-- depth indication -->
|
|
<circle cx="50" cy="50" r="3" fill="#0891b2"/>
|
|
<circle cx="50" cy="90" r="3" fill="#0891b2"/>
|
|
<circle cx="50" cy="130" r="3" fill="#0891b2"/>
|
|
<circle cx="30" cy="60" r="3" fill="#22d3ee"/>
|
|
<circle cx="30" cy="100" r="3" fill="#22d3ee"/>
|
|
</svg>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>Wave / Oscillation</h3>
|
|
<p>Alternating peaks that swing out along x-axis then y-axis as you go up. Smooth sinusoidal form, organic feel despite being parametric.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-choice="fins" onclick="toggleSelect(this)">
|
|
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:180px;overflow:hidden;">
|
|
<svg width="120" height="160" viewBox="0 0 120 160">
|
|
<text x="6" y="14" fill="#555" font-size="9" font-family="monospace">top view →</text>
|
|
<line x1="10" y1="20" x2="10" y2="155" stroke="#333" stroke-width="2"/>
|
|
<line x1="10" y1="20" x2="110" y2="20" stroke="#333" stroke-width="2"/>
|
|
<!-- stacked fins radiating outward -->
|
|
<g stroke="#d97706" stroke-width="2" fill="none">
|
|
<!-- fin 1 -->
|
|
<path d="M10,35 L55,35 L55,45 L10,45"/>
|
|
<!-- fin 2 rotated -->
|
|
<path d="M10,55 L10,65 L20,65"/>
|
|
<path d="M10,55 L55,55 L55,65"/>
|
|
<!-- fin 3 -->
|
|
<path d="M10,80 L55,80 L55,90 L10,90"/>
|
|
<!-- fin 4 rotated -->
|
|
<path d="M10,105 L10,115 L20,115"/>
|
|
<path d="M10,105 L55,105 L55,115"/>
|
|
<!-- fin 5 -->
|
|
<path d="M10,130 L55,130 L55,140 L10,140"/>
|
|
</g>
|
|
<text x="58" y="40" fill="#d97706" font-size="8">→ x</text>
|
|
<text x="22" y="68" fill="#f59e0b" font-size="8">↓ y</text>
|
|
</svg>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>Rotating Fins</h3>
|
|
<p>Horizontal blades that rotate 90° with each piece — alternating x-axis and y-axis protrusion. Strong geometric rhythm, industrial-abstract feel.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-choice="fractal" onclick="toggleSelect(this)">
|
|
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:180px;overflow:hidden;">
|
|
<svg width="120" height="160" viewBox="0 0 120 160">
|
|
<text x="6" y="14" fill="#555" font-size="9" font-family="monospace">front view →</text>
|
|
<line x1="10" y1="20" x2="10" y2="155" stroke="#333" stroke-width="2"/>
|
|
<!-- branching / fractal-like structure growing from corner -->
|
|
<g stroke="#16a34a" fill="none">
|
|
<!-- trunk -->
|
|
<line x1="10" y1="150" x2="10" y2="100" stroke-width="5"/>
|
|
<!-- level 1 branches -->
|
|
<line x1="10" y1="120" x2="35" y2="100" stroke-width="3"/>
|
|
<line x1="10" y1="120" x2="35" y2="140" stroke-width="3"/>
|
|
<!-- level 2 -->
|
|
<line x1="35" y1="100" x2="55" y2="88" stroke-width="2"/>
|
|
<line x1="35" y1="100" x2="55" y2="112" stroke-width="2"/>
|
|
<line x1="35" y1="140" x2="55" y2="128" stroke-width="2"/>
|
|
<line x1="35" y1="140" x2="55" y2="152" stroke-width="2"/>
|
|
<!-- level 3 -->
|
|
<line x1="55" y1="88" x2="70" y2="82" stroke-width="1.5"/>
|
|
<line x1="55" y1="88" x2="70" y2="94" stroke-width="1.5"/>
|
|
<line x1="55" y1="112" x2="70" y2="106" stroke-width="1.5"/>
|
|
<line x1="55" y1="112" x2="70" y2="118" stroke-width="1.5"/>
|
|
<!-- upper section repeat -->
|
|
<line x1="10" y1="80" x2="10" y2="50" stroke-width="4"/>
|
|
<line x1="10" y1="65" x2="30" y2="50" stroke-width="2.5"/>
|
|
<line x1="10" y1="65" x2="30" y2="80" stroke-width="2.5"/>
|
|
<line x1="30" y1="50" x2="48" y2="42" stroke-width="1.5"/>
|
|
<line x1="30" y1="50" x2="48" y2="58" stroke-width="1.5"/>
|
|
<line x1="30" y1="80" x2="48" y2="72" stroke-width="1.5"/>
|
|
<line x1="30" y1="80" x2="48" y2="88" stroke-width="1.5"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>Branching / Fractal</h3>
|
|
<p>Tree-like structure grows from corner outward. Each piece has a self-similar branching pattern at different scale. Bold, sculptural.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|