Skip to content

Commit ac4a932

Browse files
bytecode001bytecode001
authored
Add files via upload
1 parent ae73e74 commit ac4a932

3 files changed

Lines changed: 1377 additions & 0 deletions

File tree

‎044-magnetic-CTA-playground/index.html‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,220 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta
7+
name="description"
8+
content="An interactive playground for tuning accessible magnetic CTA buttons."
9+
/>
10+
<meta name="color-scheme" content="dark" />
11+
<meta
12+
http-equiv="Content-Security-Policy"
13+
content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'"
14+
/>
15+
<title>Magnetic CTA Playground</title>
16+
<link rel="stylesheet" href="styles.css" />
17+
<script src="script.js" defer></script>
18+
</head>
119

20+
<body>
21+
<div class="app-shell">
22+
<!-- Compact product header. -->
23+
<header class="app-header">
24+
<a class="brand" href="#playground" aria-label="Magnetic CTA Playground home">
25+
<span class="brand__mark" aria-hidden="true">
26+
<span></span>
27+
<span></span>
28+
</span>
29+
<span>Magnetic CTA</span>
30+
</a>
31+
32+
<div class="header-meta" aria-label="Technology used">
33+
<span>Pointer Events</span>
34+
<span class="header-meta__dot" aria-hidden="true"></span>
35+
<span>60 FPS</span>
36+
</div>
37+
</header>
38+
39+
<main id="playground" class="playground">
40+
<!-- Introduction and live status. -->
41+
<section class="intro" aria-labelledby="page-title">
42+
<div>
43+
<p class="eyebrow">
44+
<span aria-hidden="true"></span>
45+
Interaction laboratory
46+
</p>
47+
<h1 id="page-title">Tune the pull.<br />Feel the spring.</h1>
48+
</div>
49+
50+
<div class="intro__copy">
51+
<p>
52+
Move your pointer near a button. It follows with a subtle magnetic
53+
pull, then springs precisely back into place.
54+
</p>
55+
<p class="motion-status" data-motion-status aria-live="polite">
56+
Motion is active
57+
</p>
58+
</div>
59+
</section>
60+
61+
<div class="workspace">
62+
<!-- Interactive preview surface. -->
63+
<section
64+
class="preview-card"
65+
data-playground
66+
aria-labelledby="preview-title"
67+
>
68+
<div class="preview-card__topbar">
69+
<div>
70+
<p class="section-label">Live preview</p>
71+
<h2 id="preview-title">Three personalities</h2>
72+
</div>
73+
74+
<div class="live-badge">
75+
<span aria-hidden="true"></span>
76+
Live
77+
</div>
78+
</div>
79+
80+
<div class="button-stage">
81+
<div class="magnetic-target" data-magnetic-target>
82+
<button class="magnetic-cta magnetic-cta--acid" type="button">
83+
<span class="magnetic-cta__label">Start building</span>
84+
<span class="magnetic-cta__icon" aria-hidden="true">↗</span>
85+
</button>
86+
</div>
87+
88+
<div class="magnetic-target" data-magnetic-target>
89+
<button class="magnetic-cta magnetic-cta--light" type="button">
90+
<span class="magnetic-cta__label">Explore motion</span>
91+
<span class="magnetic-cta__icon" aria-hidden="true">→</span>
92+
</button>
93+
</div>
94+
95+
<div class="magnetic-target" data-magnetic-target>
96+
<button class="magnetic-cta magnetic-cta--outline" type="button">
97+
<span class="magnetic-cta__label">Launch idea</span>
98+
<span class="magnetic-cta__icon" aria-hidden="true">✦</span>
99+
</button>
100+
</div>
101+
</div>
102+
103+
<div class="preview-card__footer" aria-hidden="true">
104+
<span>Move slowly around the edges</span>
105+
<span class="coordinate-display" data-coordinate-display>X 000 · Y 000</span>
106+
</div>
107+
</section>
108+
109+
<!-- Controls remain native, labeled and keyboard accessible. -->
110+
<aside class="controls-card" aria-labelledby="controls-title">
111+
<div class="controls-card__header">
112+
<div>
113+
<p class="section-label">Motion controls</p>
114+
<h2 id="controls-title">Make it yours</h2>
115+
</div>
116+
117+
<label class="switch">
118+
<span class="switch__label">Motion</span>
119+
<input type="checkbox" data-motion-toggle checked />
120+
<span class="switch__track" aria-hidden="true">
121+
<span></span>
122+
</span>
123+
</label>
124+
</div>
125+
126+
<div class="control-list">
127+
<label class="range-control" for="strength">
128+
<span class="range-control__meta">
129+
<span>Pull strength</span>
130+
<output for="strength" data-output="strength">28%</output>
131+
</span>
132+
<input
133+
id="strength"
134+
name="strength"
135+
type="range"
136+
min="8"
137+
max="48"
138+
step="1"
139+
value="28"
140+
data-setting="strength"
141+
/>
142+
</label>
143+
144+
<label class="range-control" for="radius">
145+
<span class="range-control__meta">
146+
<span>Magnetic field</span>
147+
<output for="radius" data-output="radius">180 px</output>
148+
</span>
149+
<input
150+
id="radius"
151+
name="radius"
152+
type="range"
153+
min="80"
154+
max="280"
155+
step="10"
156+
value="180"
157+
data-setting="radius"
158+
/>
159+
</label>
160+
161+
<label class="range-control" for="spring">
162+
<span class="range-control__meta">
163+
<span>Spring tension</span>
164+
<output for="spring" data-output="spring">14</output>
165+
</span>
166+
<input
167+
id="spring"
168+
name="spring"
169+
type="range"
170+
min="6"
171+
max="24"
172+
step="1"
173+
value="14"
174+
data-setting="spring"
175+
/>
176+
</label>
177+
178+
<label class="range-control" for="damping">
179+
<span class="range-control__meta">
180+
<span>Damping</span>
181+
<output for="damping" data-output="damping">82%</output>
182+
</span>
183+
<input
184+
id="damping"
185+
name="damping"
186+
type="range"
187+
min="65"
188+
max="94"
189+
step="1"
190+
value="82"
191+
data-setting="damping"
192+
/>
193+
</label>
194+
</div>
195+
196+
<div class="controls-card__footer">
197+
<button class="reset-button" type="button" data-reset>
198+
<span aria-hidden="true">↺</span>
199+
Reset values
200+
</button>
201+
<span class="controls-card__hint">No libraries. Just physics.</span>
202+
</div>
203+
</aside>
204+
</div>
205+
206+
<section class="tech-strip" aria-label="Implementation details">
207+
<p>Built with</p>
208+
<ul>
209+
<li>Semantic buttons</li>
210+
<li>CSS transforms</li>
211+
<li>Pointer Events</li>
212+
<li>requestAnimationFrame</li>
213+
</ul>
214+
</section>
215+
</main>
216+
</div>
217+
218+
<div class="toast" data-toast role="status" aria-live="polite" aria-atomic="true"></div>
219+
</body>
220+
</html>

0 commit comments

Comments
 (0)