| 1 | <template id="06-wheel-pillars-template"> |
| 2 | <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> |
| 3 | <link href="https://fonts.googleapis.com/css2?family=Geist:wght@500;700&family=JetBrains+Mono:wght@400;500&display=block" rel="stylesheet" /> |
| 4 | |
| 5 | <div |
| 6 | data-composition-id="06-wheel-pillars" |
| 7 | data-start="0" |
| 8 | data-duration="2.5" |
| 9 | data-width="1920" |
| 10 | data-height="1080" |
| 11 | > |
| 12 | <div class="stage-06"> |
| 13 | <div class="grid-floor"></div> |
| 14 | |
| 15 | <div class="wheel-wrap"> |
| 16 | <div class="wheel"> |
| 17 | <div class="wheel-inner"></div> |
| 18 | <div class="wheel-tick t0"></div> |
| 19 | <div class="wheel-tick t1"></div> |
| 20 | <div class="wheel-tick t2"></div> |
| 21 | <div class="wheel-tick t3"></div> |
| 22 | <div class="wheel-tick t4"></div> |
| 23 | <div class="wheel-tick t5"></div> |
| 24 | <div class="wheel-tick t6"></div> |
| 25 | <div class="wheel-tick t7"></div> |
| 26 | </div> |
| 27 | </div> |
| 28 | |
| 29 | <div class="panel p-left"> |
| 30 | <div class="pname">Plan</div> |
| 31 | <div class="pdesc">Roadmaps, cycles, and projects</div> |
| 32 | </div> |
| 33 | <div class="panel p-right"> |
| 34 | <div class="pname">Build</div> |
| 35 | <div class="pdesc">Issues, editor, and agents</div> |
| 36 | </div> |
| 37 | <div class="panel p-third"> |
| 38 | <div class="pname">Monitor</div> |
| 39 | <div class="pdesc">Insights and analytics</div> |
| 40 | </div> |
| 41 | |
| 42 | <div class="vignette"></div> |
| 43 | <div class="grain"></div> |
| 44 | </div> |
| 45 | |
| 46 | <style> |
| 47 | [data-composition-id="06-wheel-pillars"] { |
| 48 | position: absolute; inset: 0; overflow: hidden; background: #000; |
| 49 | } |
| 50 | [data-composition-id="06-wheel-pillars"] .stage-06 { position: absolute; inset: 0; } |
| 51 | [data-composition-id="06-wheel-pillars"] .grid-floor { |
| 52 | position: absolute; inset: 0; |
| 53 | transform: perspective(900px) rotateX(60deg) translateY(25%); |
| 54 | background: |
| 55 | repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 80px), |
| 56 | repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 80px); |
| 57 | background-color: #000; |
| 58 | } |
| 59 | [data-composition-id="06-wheel-pillars"] .wheel-wrap { |
| 60 | position: absolute; |
| 61 | top: 50%; left: 50%; |
| 62 | transform: translate(-50%, -50%); |
| 63 | width: 520px; height: 520px; |
| 64 | filter: drop-shadow(0 0 80px rgba(169,176,240,0.4)); |
| 65 | } |
| 66 | [data-composition-id="06-wheel-pillars"] .wheel { |
| 67 | position: relative; |
| 68 | width: 100%; height: 100%; |
| 69 | border-radius: 50%; |
| 70 | background: |
| 71 | conic-gradient(from 0deg, |
| 72 | #5E6AD2 0deg, |
| 73 | #A155FF 72deg, |
| 74 | #5db4ff 144deg, |
| 75 | #FFD84A 216deg, |
| 76 | #A9B0F0 288deg, |
| 77 | #5E6AD2 360deg); |
| 78 | opacity: 0; |
| 79 | } |
| 80 | [data-composition-id="06-wheel-pillars"] .wheel-inner { |
| 81 | position: absolute; |
| 82 | top: 10%; left: 10%; |
| 83 | width: 80%; height: 80%; |
| 84 | border-radius: 50%; |
| 85 | background: |
| 86 | radial-gradient(circle at 35% 30%, rgba(255,255,255,0.15) 0%, transparent 40%), |
| 87 | linear-gradient(145deg, #0d0d18 0%, #1a1a28 50%, #0a0a14 100%); |
| 88 | border: 2px solid rgba(169,176,240,0.3); |
| 89 | box-shadow: inset 0 0 60px rgba(94,106,210,0.3); |
| 90 | } |
| 91 | [data-composition-id="06-wheel-pillars"] .wheel-tick { |
| 92 | position: absolute; |
| 93 | top: 50%; left: 50%; |
| 94 | width: 4px; height: 24px; |
| 95 | background: rgba(255,255,255,0.4); |
| 96 | transform-origin: 50% 240px; |
| 97 | } |
| 98 | [data-composition-id="06-wheel-pillars"] .t0 { transform: translate(-50%, -50%) rotate(0deg) translateY(-240px); } |
| 99 | [data-composition-id="06-wheel-pillars"] .t1 { transform: translate(-50%, -50%) rotate(45deg) translateY(-240px); } |
| 100 | [data-composition-id="06-wheel-pillars"] .t2 { transform: translate(-50%, -50%) rotate(90deg) translateY(-240px); } |
| 101 | [data-composition-id="06-wheel-pillars"] .t3 { transform: translate(-50%, -50%) rotate(135deg) translateY(-240px); } |
| 102 | [data-composition-id="06-wheel-pillars"] .t4 { transform: translate(-50%, -50%) rotate(180deg) translateY(-240px); } |
| 103 | [data-composition-id="06-wheel-pillars"] .t5 { transform: translate(-50%, -50%) rotate(225deg) translateY(-240px); } |
| 104 | [data-composition-id="06-wheel-pillars"] .t6 { transform: translate(-50%, -50%) rotate(270deg) translateY(-240px); } |
| 105 | [data-composition-id="06-wheel-pillars"] .t7 { transform: translate(-50%, -50%) rotate(315deg) translateY(-240px); } |
| 106 | |
| 107 | [data-composition-id="06-wheel-pillars"] .panel { |
| 108 | position: absolute; |
| 109 | width: 380px; |
| 110 | padding: 24px 28px; |
| 111 | background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); |
| 112 | border: 1px solid rgba(255,255,255,0.12); |
| 113 | border-radius: 16px; |
| 114 | backdrop-filter: blur(14px); |
| 115 | opacity: 0; |
| 116 | } |
| 117 | [data-composition-id="06-wheel-pillars"] .p-left { top: 50%; left: 120px; transform: translateY(-50%); } |
| 118 | [data-composition-id="06-wheel-pillars"] .p-right { top: 50%; right: 120px; transform: translateY(-50%); } |
| 119 | [data-composition-id="06-wheel-pillars"] .p-third { bottom: 120px; left: 50%; transform: translateX(-50%); } |
| 120 | [data-composition-id="06-wheel-pillars"] .pname { |
| 121 | font-family: "Geist", sans-serif; |
| 122 | font-weight: 700; |
| 123 | font-size: 56px; |
| 124 | letter-spacing: -0.02em; |
| 125 | color: #fff; |
| 126 | text-shadow: 0 0 30px rgba(169,176,240,0.5); |
| 127 | } |
| 128 | [data-composition-id="06-wheel-pillars"] .pdesc { |
| 129 | margin-top: 8px; |
| 130 | font-family: "JetBrains Mono", monospace; |
| 131 | font-size: 18px; |
| 132 | color: rgba(255,255,255,0.7); |
| 133 | letter-spacing: 0.02em; |
| 134 | } |
| 135 | [data-composition-id="06-wheel-pillars"] .vignette { |
| 136 | position: absolute; inset: 0; pointer-events: none; |
| 137 | background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.95) 95%); |
| 138 | opacity: 0.7; |
| 139 | } |
| 140 | [data-composition-id="06-wheel-pillars"] .grain { |
| 141 | position: absolute; inset: 0; pointer-events: none; |
| 142 | opacity: 0.08; |
| 143 | background-image: |
| 144 | radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), |
| 145 | radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px); |
| 146 | background-size: 3px 3px, 5px 5px; |
| 147 | } |
| 148 | </style> |
| 149 | |
| 150 | <script> |
| 151 | (() => { |
| 152 | const SLOT = 2.5; |
| 153 | const tl = gsap.timeline({ paused: true }); |
| 154 | const sel = (q) => `[data-composition-id="06-wheel-pillars"] ${q}`; |
| 155 | |
| 156 | tl.to(sel('.wheel'), { opacity: 1, duration: 0.35, ease: 'power2.out' }, 0); |
| 157 | tl.fromTo(sel('.wheel'), |
| 158 | { rotate: -30 }, |
| 159 | { rotate: 360, duration: SLOT, ease: 'none' }, 0); |
| 160 | |
| 161 | tl.fromTo(sel('.p-left'), |
| 162 | { x: -100, opacity: 0 }, |
| 163 | { x: 0, opacity: 1, duration: 0.5, ease: 'power3.out' }, 0.4); |
| 164 | |
| 165 | tl.fromTo(sel('.p-right'), |
| 166 | { x: 100, opacity: 0 }, |
| 167 | { x: 0, opacity: 1, duration: 0.5, ease: 'power3.out' }, 1.0); |
| 168 | |
| 169 | tl.fromTo(sel('.p-third'), |
| 170 | { y: 100, opacity: 0 }, |
| 171 | { y: 0, opacity: 1, duration: 0.5, ease: 'power3.out' }, 1.6); |
| 172 | |
| 173 | tl.to(sel('.panel'), { opacity: 0, scale: 0.9, duration: 0.25, ease: 'power2.in' }, 2.25); |
| 174 | tl.to(sel('.wheel'), { opacity: 0, scale: 0.7, duration: 0.25, ease: 'power2.in' }, 2.25); |
| 175 | |
| 176 | tl.to({}, { duration: SLOT }, 0); |
| 177 | window.__timelines = window.__timelines || {}; |
| 178 | window.__timelines['06-wheel-pillars'] = tl; |
| 179 | })(); |
| 180 | </script> |
| 181 | </div> |
| 182 | </template> |
| 183 |