| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <title>Takram Organic · Soft Tech Radial</title> |
| 6 | <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet" /> |
| 7 | <style> |
| 8 | /* |
| 9 | * frame-takram-organic — soft-tech radial node graph as art. |
| 10 | * Visual style distilled from huashu-design "Takram" philosophy (MIT, © alchaincyf). |
| 11 | * Rebuilt as a self-contained CSS/SVG @keyframes timeline for html-video / Hyperframes. |
| 12 | * Timeline (5s @ 60fps): beige wash -> rounded glass card -> curved links draw -> |
| 13 | * radial nodes pop in sequence -> title + caption fade -> gentle float loop. |
| 14 | */ |
| 15 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 16 | body { |
| 17 | width: 1920px; height: 1080px; overflow: hidden; |
| 18 | background: #EFEAE0; color: #3A3A34; |
| 19 | font-family: 'Manrope', sans-serif; position: relative; |
| 20 | } |
| 21 | .wash { position: absolute; inset: 0; z-index: 0; |
| 22 | background: radial-gradient(ellipse 1100px 900px at 70% 50%, rgba(122,158,127,0.10) 0%, transparent 65%); } |
| 23 | |
| 24 | /* frosted rounded card */ |
| 25 | .card { position: absolute; left: 120px; top: 140px; width: 760px; height: 800px; z-index: 2; |
| 26 | background: rgba(255,253,248,0.66); backdrop-filter: blur(8px); |
| 27 | border: 1px solid rgba(255,255,255,0.8); border-radius: 40px; |
| 28 | box-shadow: 0 30px 80px rgba(120,110,90,0.10); padding: 88px 80px; |
| 29 | opacity: 0; transform: translateY(26px) scale(0.985); |
| 30 | animation: cardIn 1s cubic-bezier(0.16,1,0.3,1) 0.2s forwards; } |
| 31 | @keyframes cardIn { to { opacity: 1; transform: translateY(0) scale(1); } } |
| 32 | |
| 33 | .eyebrow { font-weight: 600; font-size: 16px; letter-spacing: 4px; text-transform: uppercase; |
| 34 | color: #7A9E7F; margin-bottom: 32px; opacity: 0; animation: fadeUp 0.8s ease-out 0.7s forwards; } |
| 35 | .title { font-weight: 700; font-size: 92px; line-height: 1.04; letter-spacing: -2px; color: #2E2E28; |
| 36 | opacity: 0; animation: fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.9s forwards; } |
| 37 | .title .soft { color: #C98A5E; } |
| 38 | .caption { font-weight: 400; font-size: 22px; line-height: 1.8; color: #8A867C; margin-top: 36px; |
| 39 | max-width: 520px; opacity: 0; animation: fadeUp 0.9s ease-out 1.2s forwards; } |
| 40 | @keyframes fadeUp { 0%{opacity:0;transform:translateY(20px)} 100%{opacity:1;transform:translateY(0)} } |
| 41 | |
| 42 | /* radial node graph (right) as art */ |
| 43 | .graph { position: absolute; right: 60px; top: 50%; transform: translateY(-50%); |
| 44 | width: 760px; height: 760px; z-index: 1; animation: floatY 7s ease-in-out 2s infinite; } |
| 45 | @keyframes floatY { 0%,100%{transform:translateY(-50%)} 50%{transform:translateY(-54%)} } |
| 46 | |
| 47 | .link { stroke: #B8C9BA; stroke-width: 2; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; |
| 48 | animation: draw 1.1s ease-out forwards; } |
| 49 | @keyframes draw { to { stroke-dashoffset: 0; } } |
| 50 | |
| 51 | .node { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; |
| 52 | animation: pop 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards; } |
| 53 | @keyframes pop { to { transform: scale(1); opacity: 1; } } |
| 54 | .node.center circle { fill: #C98A5E; } |
| 55 | .node circle { fill: #7A9E7F; } |
| 56 | |
| 57 | @media (prefers-reduced-motion: reduce) { |
| 58 | * { animation: none !important; } |
| 59 | .card,.eyebrow,.title,.caption{opacity:1;transform:none} |
| 60 | .link{stroke-dashoffset:0}.node{transform:scale(1);opacity:1} |
| 61 | } |
| 62 | </style> |
| 63 | </head> |
| 64 | <body> |
| 65 | <div class="wash"></div> |
| 66 | |
| 67 | <div class="card"> |
| 68 | <div class="eyebrow">Context · Memory · Evolution</div> |
| 69 | <div class="title">A design agent<br>that <span class="soft">remembers</span>.</div> |
| 70 | <div class="caption">Eight context nodes feed one evolving core — every project makes the next one sharper.</div> |
| 71 | </div> |
| 72 | |
| 73 | <!-- Radial node graph: links drawn first, then nodes pop outward --> |
| 74 | <svg class="graph" viewBox="0 0 760 760" fill="none"> |
| 75 | <!-- links from center (380,380) to 8 surrounding nodes --> |
| 76 | <path class="link" style="animation-delay:1.4s" d="M380 380 L380 150"/> |
| 77 | <path class="link" style="animation-delay:1.48s" d="M380 380 L543 217"/> |
| 78 | <path class="link" style="animation-delay:1.56s" d="M380 380 L610 380"/> |
| 79 | <path class="link" style="animation-delay:1.64s" d="M380 380 L543 543"/> |
| 80 | <path class="link" style="animation-delay:1.72s" d="M380 380 L380 610"/> |
| 81 | <path class="link" style="animation-delay:1.8s" d="M380 380 L217 543"/> |
| 82 | <path class="link" style="animation-delay:1.88s" d="M380 380 L150 380"/> |
| 83 | <path class="link" style="animation-delay:1.96s" d="M380 380 L217 217"/> |
| 84 | |
| 85 | <g class="node" style="animation-delay:1.9s"><circle cx="380" cy="150" r="22"/></g> |
| 86 | <g class="node" style="animation-delay:1.98s"><circle cx="543" cy="217" r="22"/></g> |
| 87 | <g class="node" style="animation-delay:2.06s"><circle cx="610" cy="380" r="22"/></g> |
| 88 | <g class="node" style="animation-delay:2.14s"><circle cx="543" cy="543" r="22"/></g> |
| 89 | <g class="node" style="animation-delay:2.22s"><circle cx="380" cy="610" r="22"/></g> |
| 90 | <g class="node" style="animation-delay:2.3s"><circle cx="217" cy="543" r="22"/></g> |
| 91 | <g class="node" style="animation-delay:2.38s"><circle cx="150" cy="380" r="22"/></g> |
| 92 | <g class="node" style="animation-delay:2.46s"><circle cx="217" cy="217" r="22"/></g> |
| 93 | <g class="node center" style="animation-delay:1.3s"><circle cx="380" cy="380" r="40"/></g> |
| 94 | </svg> |
| 95 | </body> |
| 96 | </html> |
| 97 |