cyclecad 3.11.0 → 3.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/index.html +40 -10
- package/app/js/modules/ai-engineer.js +331 -5
- package/cyclecad.html +1081 -0
- package/explodeview.html +1102 -0
- package/index.html +1683 -1240
- package/package.json +1 -1
- package/pentacad.html +1097 -0
package/index.html
CHANGED
|
@@ -1,1306 +1,1749 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>cycleCAD Suite — idea to finished part, in one browser tab</title>
|
|
7
|
+
<meta name="description" content="cycleCAD Suite: parametric CAD, 3D viewer with AI render, and browser-native 5-axis CAM. Three open-source products in one browser tab. No install, MIT-licensed." />
|
|
8
|
+
<meta name="keywords" content="cycleCAD, ExplodeView, Pentacad, CAD, CAM, 5-axis, browser CAD, parametric, open source, STEP viewer, AI CAD, WebXR" />
|
|
9
|
+
<meta name="author" content="Sachin Kumar" />
|
|
10
|
+
<link rel="canonical" href="https://cyclecad.com/" />
|
|
11
|
+
<meta property="og:type" content="website" />
|
|
12
|
+
<meta property="og:site_name" content="cycleCAD Suite" />
|
|
13
|
+
<meta property="og:title" content="cycleCAD Suite — idea to finished part, in one browser tab" />
|
|
14
|
+
<meta property="og:description" content="Parametric CAD, 3D viewer with AI render, and browser-native 5-axis CAM. Three open-source products in one browser tab." />
|
|
15
|
+
<meta property="og:url" content="https://cyclecad.com/" />
|
|
16
|
+
<meta property="og:image" content="https://cyclecad.com/screenshot.png" />
|
|
17
|
+
<meta name="twitter:card" content="summary_large_image" />
|
|
18
|
+
<meta name="twitter:title" content="cycleCAD Suite" />
|
|
19
|
+
<meta name="twitter:description" content="Parametric CAD + 3D viewer + 5-axis CAM — all in one browser tab, all open source." />
|
|
20
|
+
<meta name="twitter:image" content="https://cyclecad.com/screenshot.png" />
|
|
21
|
+
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>\u2699\ufe0f</text></svg>" />
|
|
22
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
23
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
24
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet" />
|
|
25
|
+
|
|
26
|
+
<style>
|
|
27
|
+
/* ─────────────────────────────────────────────
|
|
28
|
+
DESIGN TOKENS
|
|
29
|
+
───────────────────────────────────────────── */
|
|
30
|
+
:root {
|
|
31
|
+
--bg: #0A1628;
|
|
32
|
+
--bg-alt: #122240;
|
|
33
|
+
--bg-card: #1A2D50;
|
|
34
|
+
--border: #1E3A5F;
|
|
35
|
+
--border-hi: #2A4F80;
|
|
36
|
+
--text: #F0F0E8;
|
|
37
|
+
--text-2: #8B9AB5;
|
|
38
|
+
--text-3: #5A6B85;
|
|
39
|
+
--gold: #D4A843;
|
|
40
|
+
--gold-2: #E8C065;
|
|
41
|
+
--blue: #2E86DE;
|
|
42
|
+
--teal: #3AAFA9;
|
|
43
|
+
--emerald: #10B981;
|
|
44
|
+
--purple: #8B6FC0;
|
|
45
|
+
--amber: #F59E0B;
|
|
46
|
+
--coral: #E05555;
|
|
47
|
+
|
|
48
|
+
/* Motion */
|
|
49
|
+
--ease: cubic-bezier(0.22, 1, 0.36, 1);
|
|
50
|
+
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
|
|
51
|
+
--t-fast: 160ms;
|
|
52
|
+
--t-med: 420ms;
|
|
53
|
+
--t-slow: 900ms;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* ─────────────────────────────────────────────
|
|
57
|
+
BASE
|
|
58
|
+
───────────────────────────────────────────── */
|
|
59
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
60
|
+
html { scroll-behavior: smooth; }
|
|
61
|
+
body {
|
|
62
|
+
background: var(--bg); color: var(--text);
|
|
63
|
+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
64
|
+
font-size: 16px; line-height: 1.6;
|
|
65
|
+
-webkit-font-smoothing: antialiased;
|
|
66
|
+
overflow-x: hidden;
|
|
67
|
+
}
|
|
68
|
+
a { color: inherit; text-decoration: none; }
|
|
69
|
+
code, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.9em; }
|
|
70
|
+
|
|
71
|
+
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
|
|
72
|
+
|
|
73
|
+
/* ─────────────────────────────────────────────
|
|
74
|
+
NAV
|
|
75
|
+
───────────────────────────────────────────── */
|
|
76
|
+
nav {
|
|
77
|
+
position: sticky; top: 0; z-index: 50;
|
|
78
|
+
background: rgba(10, 22, 40, 0.72);
|
|
79
|
+
backdrop-filter: blur(20px) saturate(1.5);
|
|
80
|
+
border-bottom: 1px solid var(--border);
|
|
81
|
+
padding: 16px 0;
|
|
82
|
+
animation: navFadeIn 0.6s var(--ease) 0.1s both;
|
|
83
|
+
}
|
|
84
|
+
@keyframes navFadeIn { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }
|
|
85
|
+
|
|
86
|
+
nav .wrap { display: flex; align-items: center; justify-content: space-between; }
|
|
87
|
+
nav .brand {
|
|
88
|
+
font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 21px;
|
|
89
|
+
letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px;
|
|
90
|
+
}
|
|
91
|
+
nav .brand .logo {
|
|
92
|
+
width: 28px; height: 28px; border-radius: 6px;
|
|
93
|
+
background: linear-gradient(135deg, var(--gold), var(--blue));
|
|
94
|
+
display: grid; place-items: center; font-size: 15px;
|
|
95
|
+
animation: logoSpin 20s linear infinite;
|
|
96
|
+
}
|
|
97
|
+
@keyframes logoSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
|
|
98
|
+
nav .brand em { color: var(--gold); font-style: normal; }
|
|
99
|
+
nav .links { display: flex; gap: 32px; align-items: center; font-size: 14px; color: var(--text-2); }
|
|
100
|
+
nav .links a { position: relative; transition: color var(--t-fast) var(--ease); }
|
|
101
|
+
nav .links a:hover { color: var(--text); }
|
|
102
|
+
nav .links a::after {
|
|
103
|
+
content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
|
|
104
|
+
background: var(--gold); transition: width var(--t-fast) var(--ease);
|
|
105
|
+
}
|
|
106
|
+
nav .links a:hover::after { width: 100%; }
|
|
107
|
+
nav .cta {
|
|
108
|
+
background: var(--gold); color: var(--bg);
|
|
109
|
+
padding: 9px 20px; border-radius: 6px; font-weight: 700; font-size: 14px;
|
|
110
|
+
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
|
|
111
|
+
}
|
|
112
|
+
nav .cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(212,168,67,0.4); }
|
|
113
|
+
nav .cta::after { display: none !important; }
|
|
114
|
+
|
|
115
|
+
/* ─────────────────────────────────────────────
|
|
116
|
+
HERO
|
|
117
|
+
───────────────────────────────────────────── */
|
|
118
|
+
header.hero {
|
|
119
|
+
padding: 120px 0 80px; position: relative; overflow: hidden;
|
|
120
|
+
}
|
|
121
|
+
header.hero::before,
|
|
122
|
+
header.hero::after {
|
|
123
|
+
content: ''; position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none;
|
|
124
|
+
}
|
|
125
|
+
header.hero::before {
|
|
126
|
+
width: 600px; height: 600px; background: rgba(212,168,67,0.14);
|
|
127
|
+
top: -100px; right: -150px; animation: orb1 18s ease-in-out infinite;
|
|
128
|
+
}
|
|
129
|
+
header.hero::after {
|
|
130
|
+
width: 700px; height: 700px; background: rgba(46,134,222,0.12);
|
|
131
|
+
bottom: -200px; left: -200px; animation: orb2 22s ease-in-out infinite;
|
|
132
|
+
}
|
|
133
|
+
@keyframes orb1 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-60px, 80px); } }
|
|
134
|
+
@keyframes orb2 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(80px, -40px); } }
|
|
135
|
+
|
|
136
|
+
.hero .wrap { position: relative; z-index: 1; }
|
|
137
|
+
|
|
138
|
+
.kicker {
|
|
139
|
+
display: inline-flex; align-items: center; gap: 8px;
|
|
140
|
+
font-size: 11px; letter-spacing: 4px; text-transform: uppercase; font-weight: 700;
|
|
141
|
+
color: var(--gold);
|
|
142
|
+
padding: 7px 14px;
|
|
143
|
+
background: rgba(212,168,67,0.08);
|
|
144
|
+
border: 1px solid rgba(212,168,67,0.3);
|
|
145
|
+
border-radius: 100px; margin-bottom: 28px;
|
|
146
|
+
animation: slideUp 0.8s var(--ease) 0.3s both;
|
|
147
|
+
}
|
|
148
|
+
.kicker .dot {
|
|
149
|
+
width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
|
|
150
|
+
box-shadow: 0 0 8px var(--gold); animation: pulse 1.8s ease-in-out infinite;
|
|
151
|
+
}
|
|
152
|
+
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } }
|
|
153
|
+
|
|
154
|
+
h1.hero {
|
|
155
|
+
font-family: 'Fraunces', Georgia, serif; font-weight: 700;
|
|
156
|
+
font-size: clamp(44px, 8vw, 96px); line-height: 1.02; letter-spacing: -0.035em;
|
|
157
|
+
margin-bottom: 28px; max-width: 1100px;
|
|
158
|
+
animation: slideUp 0.9s var(--ease) 0.5s both;
|
|
159
|
+
}
|
|
160
|
+
h1.hero em { font-style: italic; color: var(--gold); font-weight: 400; }
|
|
161
|
+
h1.hero .cursor {
|
|
162
|
+
display: inline-block; width: 4px; height: 0.9em; background: var(--gold);
|
|
163
|
+
margin-left: 4px; vertical-align: baseline;
|
|
164
|
+
animation: blink 1s step-end infinite;
|
|
165
|
+
}
|
|
166
|
+
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
|
|
167
|
+
|
|
168
|
+
p.lead {
|
|
169
|
+
font-size: 20px; color: var(--text-2); max-width: 720px;
|
|
170
|
+
margin-bottom: 44px; line-height: 1.55;
|
|
171
|
+
animation: slideUp 0.9s var(--ease) 0.7s both;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; animation: slideUp 0.9s var(--ease) 0.9s both; }
|
|
175
|
+
.btn {
|
|
176
|
+
padding: 16px 28px; border-radius: 8px; font-weight: 700; font-size: 15px;
|
|
177
|
+
transition: all var(--t-fast) var(--ease);
|
|
178
|
+
border: 1.5px solid transparent; display: inline-flex; align-items: center; gap: 8px;
|
|
179
|
+
cursor: pointer; position: relative; overflow: hidden;
|
|
180
|
+
}
|
|
181
|
+
.btn-primary { background: var(--gold); color: var(--bg); border-color: var(--gold); }
|
|
182
|
+
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -10px rgba(212,168,67,0.5); background: var(--gold-2); }
|
|
183
|
+
.btn-primary::before {
|
|
184
|
+
content: ''; position: absolute; inset: 0;
|
|
185
|
+
background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.3) 0%, transparent 40%);
|
|
186
|
+
opacity: 0; transition: opacity var(--t-fast);
|
|
187
|
+
}
|
|
188
|
+
.btn-primary:hover::before { opacity: 1; }
|
|
189
|
+
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }
|
|
190
|
+
.btn-secondary:hover { border-color: var(--text-2); background: rgba(255,255,255,0.03); transform: translateY(-2px); }
|
|
191
|
+
.btn .arrow { transition: transform var(--t-fast) var(--ease); }
|
|
192
|
+
.btn:hover .arrow { transform: translateX(4px); }
|
|
193
|
+
|
|
194
|
+
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
|
|
195
|
+
|
|
196
|
+
/* ─────────────────────────────────────────────
|
|
197
|
+
LIFECYCLE STRIP (animated on scroll)
|
|
198
|
+
───────────────────────────────────────────── */
|
|
199
|
+
.stages {
|
|
200
|
+
margin: 80px 0 0; padding: 40px 0;
|
|
201
|
+
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
|
|
202
|
+
background: linear-gradient(180deg, transparent, rgba(18,34,64,0.4), transparent);
|
|
203
|
+
}
|
|
204
|
+
.stages .row {
|
|
205
|
+
display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
|
|
206
|
+
align-items: stretch; position: relative;
|
|
207
|
+
}
|
|
208
|
+
.stages .row::before {
|
|
209
|
+
content: ''; position: absolute; top: 50%; left: 5%; right: 5%;
|
|
210
|
+
height: 2px; background: var(--border); z-index: 0;
|
|
211
|
+
}
|
|
212
|
+
.stages .row::after {
|
|
213
|
+
content: ''; position: absolute; top: 50%; left: 5%;
|
|
214
|
+
width: 0; height: 2px; background: linear-gradient(90deg, var(--gold), var(--blue), var(--teal), var(--emerald), var(--purple));
|
|
215
|
+
transition: width 2s var(--ease); z-index: 0;
|
|
216
|
+
}
|
|
217
|
+
.stages.anim .row::after { width: 90%; }
|
|
218
|
+
|
|
219
|
+
.stage-chip {
|
|
220
|
+
position: relative; z-index: 1; padding: 24px 12px;
|
|
221
|
+
border-radius: 12px; border: 1px solid var(--border);
|
|
222
|
+
background: var(--bg-alt); text-align: center;
|
|
223
|
+
transition: all var(--t-med) var(--ease);
|
|
224
|
+
opacity: 0; transform: translateY(24px);
|
|
225
|
+
}
|
|
226
|
+
.stages.anim .stage-chip { opacity: 1; transform: translateY(0); }
|
|
227
|
+
.stages.anim .stage-chip:nth-child(1) { transition-delay: 0.1s; }
|
|
228
|
+
.stages.anim .stage-chip:nth-child(2) { transition-delay: 0.25s; }
|
|
229
|
+
.stages.anim .stage-chip:nth-child(3) { transition-delay: 0.4s; }
|
|
230
|
+
.stages.anim .stage-chip:nth-child(4) { transition-delay: 0.55s; }
|
|
231
|
+
.stages.anim .stage-chip:nth-child(5) { transition-delay: 0.7s; }
|
|
232
|
+
|
|
233
|
+
.stage-chip:hover {
|
|
234
|
+
border-color: var(--gold); background: var(--bg-card);
|
|
235
|
+
transform: translateY(-6px); box-shadow: 0 20px 40px -10px rgba(212,168,67,0.2);
|
|
236
|
+
}
|
|
237
|
+
.stage-chip .num {
|
|
238
|
+
font-family: 'Fraunces', Georgia, serif; font-size: 40px; font-weight: 700;
|
|
239
|
+
background: linear-gradient(135deg, var(--gold), var(--gold-2));
|
|
240
|
+
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
241
|
+
line-height: 1; margin-bottom: 10px;
|
|
242
|
+
}
|
|
243
|
+
.stage-chip .n { font-weight: 700; letter-spacing: 2px; font-size: 11px; color: var(--text); text-transform: uppercase; margin-bottom: 6px; }
|
|
244
|
+
.stage-chip .sub { font-size: 11px; color: var(--text-3); }
|
|
245
|
+
@media (max-width: 900px) { .stages .row { grid-template-columns: repeat(2, 1fr); } .stages .row::before, .stages .row::after { display: none; } }
|
|
246
|
+
|
|
247
|
+
/* ─────────────────────────────────────────────
|
|
248
|
+
STAGE SECTIONS
|
|
249
|
+
───────────────────────────────────────────── */
|
|
250
|
+
section.stage { padding: 120px 0; border-bottom: 1px solid var(--border); position: relative; }
|
|
251
|
+
section.stage:nth-child(odd) { background: linear-gradient(180deg, var(--bg) 0%, rgba(18,34,64,0.2) 100%); }
|
|
252
|
+
|
|
253
|
+
.stage-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
|
|
254
|
+
@media (max-width: 900px) { .stage-layout { grid-template-columns: 1fr; gap: 40px; } }
|
|
255
|
+
|
|
256
|
+
.stage-body { opacity: 0; transform: translateX(-40px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
|
|
257
|
+
.stage.rev .stage-body { transform: translateX(40px); }
|
|
258
|
+
.stage.in-view .stage-body { opacity: 1; transform: translateX(0); }
|
|
259
|
+
|
|
260
|
+
.stage-body .label {
|
|
261
|
+
display: inline-flex; align-items: center; gap: 8px;
|
|
262
|
+
color: var(--gold); font-weight: 700; letter-spacing: 3px; font-size: 11px;
|
|
263
|
+
text-transform: uppercase; margin-bottom: 18px;
|
|
264
|
+
padding: 5px 12px; border: 1px solid rgba(212,168,67,0.3);
|
|
265
|
+
border-radius: 100px; background: rgba(212,168,67,0.06);
|
|
266
|
+
}
|
|
267
|
+
.stage-body .label .n { font-family: 'Fraunces', serif; font-weight: 700; opacity: 0.6; }
|
|
268
|
+
.stage-body h2 {
|
|
269
|
+
font-family: 'Fraunces', Georgia, serif; font-size: clamp(32px, 4.2vw, 52px);
|
|
270
|
+
line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 22px;
|
|
271
|
+
}
|
|
272
|
+
.stage-body h2 em { font-style: italic; color: var(--gold); font-weight: 400; }
|
|
273
|
+
.stage-body p { font-size: 17px; color: var(--text-2); margin-bottom: 16px; line-height: 1.65; }
|
|
274
|
+
.stage-body .products { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }
|
|
275
|
+
|
|
276
|
+
.pill {
|
|
277
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
278
|
+
padding: 7px 14px; border-radius: 100px;
|
|
279
|
+
font-size: 13px; font-weight: 600; border: 1px solid;
|
|
280
|
+
transition: all var(--t-fast) var(--ease);
|
|
281
|
+
}
|
|
282
|
+
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
|
283
|
+
.pill:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px currentColor; }
|
|
284
|
+
.pill.cyclecad { color: var(--gold); border-color: rgba(212,168,67,0.4); background: rgba(212,168,67,0.08); }
|
|
285
|
+
.pill.explode { color: var(--teal); border-color: rgba(58,175,169,0.4); background: rgba(58,175,169,0.08); }
|
|
286
|
+
.pill.pentacad { color: var(--emerald); border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.08); }
|
|
287
|
+
.pill.ai { color: var(--purple); border-color: rgba(139,111,192,0.4); background: rgba(139,111,192,0.08); }
|
|
288
|
+
|
|
289
|
+
/* VISUAL PANE */
|
|
290
|
+
.visual {
|
|
291
|
+
background: var(--bg-alt);
|
|
292
|
+
border: 1px solid var(--border);
|
|
293
|
+
border-radius: 16px; aspect-ratio: 4 / 3;
|
|
294
|
+
position: relative; overflow: hidden;
|
|
295
|
+
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
|
|
296
|
+
opacity: 0; transform: translateX(40px) scale(0.96);
|
|
297
|
+
transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
|
|
298
|
+
}
|
|
299
|
+
.stage.rev .visual { transform: translateX(-40px) scale(0.96); }
|
|
300
|
+
.stage.in-view .visual { opacity: 1; transform: translateX(0) scale(1); }
|
|
301
|
+
.visual::before {
|
|
302
|
+
content: ''; position: absolute; inset: 0;
|
|
303
|
+
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.2));
|
|
304
|
+
pointer-events: none;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.visual .label-top {
|
|
308
|
+
position: absolute; top: 16px; left: 16px; z-index: 2;
|
|
309
|
+
font-size: 10px; letter-spacing: 2.5px; color: var(--text-3);
|
|
310
|
+
text-transform: uppercase; font-weight: 700;
|
|
311
|
+
padding: 5px 10px; background: rgba(10,22,40,0.6);
|
|
312
|
+
border-radius: 4px; backdrop-filter: blur(6px);
|
|
313
|
+
}
|
|
314
|
+
.visual svg { width: 100%; height: 100%; position: relative; z-index: 1; }
|
|
315
|
+
|
|
316
|
+
/* ─────────────────────────────────────────────
|
|
317
|
+
STAGE 1: IDEATE — glowing brain + text typing
|
|
318
|
+
───────────────────────────────────────────── */
|
|
319
|
+
.vis-ideate { background: radial-gradient(circle at 30% 30%, rgba(139,111,192,0.2), transparent 60%), var(--bg-alt); }
|
|
320
|
+
.vis-ideate .term {
|
|
321
|
+
position: absolute; inset: 32px; border: 1px solid var(--border);
|
|
322
|
+
border-radius: 8px; background: rgba(10,22,40,0.8); padding: 20px;
|
|
323
|
+
font-family: 'JetBrains Mono', monospace; font-size: 12px;
|
|
324
|
+
display: flex; flex-direction: column; gap: 8px;
|
|
325
|
+
}
|
|
326
|
+
.vis-ideate .term .t-head { display: flex; gap: 6px; margin-bottom: 8px; }
|
|
327
|
+
.vis-ideate .term .t-head span { width: 9px; height: 9px; border-radius: 50%; }
|
|
328
|
+
.vis-ideate .term .t-head span:nth-child(1) { background: var(--coral); }
|
|
329
|
+
.vis-ideate .term .t-head span:nth-child(2) { background: var(--amber); }
|
|
330
|
+
.vis-ideate .term .t-head span:nth-child(3) { background: var(--emerald); }
|
|
331
|
+
.vis-ideate .line { color: var(--text-2); }
|
|
332
|
+
.vis-ideate .line .prompt { color: var(--purple); font-weight: 700; }
|
|
333
|
+
.vis-ideate .line .typed { color: var(--gold); border-right: 2px solid var(--gold); animation: typing 3s steps(40, end) 1s both, blink 0.7s step-end infinite; white-space: nowrap; overflow: hidden; display: inline-block; }
|
|
334
|
+
.vis-ideate .line.response { color: var(--emerald); opacity: 0; animation: fadeIn 0.4s var(--ease) 4.2s both; }
|
|
335
|
+
.vis-ideate .line.response::before { content: '→ '; color: var(--text-3); }
|
|
336
|
+
.stage.in-view .vis-ideate .typed { animation-play-state: running; }
|
|
337
|
+
@keyframes typing { from { width: 0; } to { width: 22ch; } }
|
|
338
|
+
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
|
|
339
|
+
|
|
340
|
+
/* ─────────────────────────────────────────────
|
|
341
|
+
STAGE 2: DESIGN — sketch drawing animation
|
|
342
|
+
───────────────────────────────────────────── */
|
|
343
|
+
.vis-design { background: linear-gradient(135deg, var(--bg-alt), var(--bg-card)); }
|
|
344
|
+
.vis-design .grid-bg {
|
|
345
|
+
position: absolute; inset: 0;
|
|
346
|
+
background-image:
|
|
347
|
+
linear-gradient(to right, rgba(30,58,95,0.4) 1px, transparent 1px),
|
|
348
|
+
linear-gradient(to bottom, rgba(30,58,95,0.4) 1px, transparent 1px);
|
|
349
|
+
background-size: 28px 28px;
|
|
350
|
+
}
|
|
351
|
+
.vis-design svg { position: relative; z-index: 1; }
|
|
352
|
+
.vis-design .draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
|
|
353
|
+
.stage.in-view .vis-design .draw { animation: draw 2s var(--ease) forwards; }
|
|
354
|
+
.stage.in-view .vis-design .draw-2 { animation: draw 2s var(--ease) 0.6s forwards; }
|
|
355
|
+
.stage.in-view .vis-design .draw-3 { animation: draw 1.4s var(--ease) 1.2s forwards; }
|
|
356
|
+
.vis-design .node { opacity: 0; }
|
|
357
|
+
.stage.in-view .vis-design .node { animation: nodePop 0.5s var(--ease) 2s forwards; }
|
|
358
|
+
.stage.in-view .vis-design .node:nth-of-type(2) { animation-delay: 2.15s; }
|
|
359
|
+
.stage.in-view .vis-design .node:nth-of-type(3) { animation-delay: 2.3s; }
|
|
360
|
+
.stage.in-view .vis-design .node:nth-of-type(4) { animation-delay: 2.45s; }
|
|
361
|
+
@keyframes draw { to { stroke-dashoffset: 0; } }
|
|
362
|
+
@keyframes nodePop { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } }
|
|
363
|
+
|
|
364
|
+
/* ─────────────────────────────────────────────
|
|
365
|
+
STAGE 3: PRESENT — exploded assembly
|
|
366
|
+
───────────────────────────────────────────── */
|
|
367
|
+
.vis-present { background: radial-gradient(circle at 50% 50%, rgba(58,175,169,0.15), transparent 60%), var(--bg-alt); }
|
|
368
|
+
.vis-present .part { transition: transform 1.6s var(--ease); transform-origin: 100px 75px; }
|
|
369
|
+
.stage.in-view .vis-present .p1 { transform: translate(-30px, -20px); }
|
|
370
|
+
.stage.in-view .vis-present .p2 { transform: translate(0, -28px); }
|
|
371
|
+
.stage.in-view .vis-present .p3 { transform: translate(30px, -20px); }
|
|
372
|
+
.stage.in-view .vis-present .p4 { transform: translate(-30px, 8px); }
|
|
373
|
+
.stage.in-view .vis-present .p6 { transform: translate(30px, 8px); }
|
|
374
|
+
.vis-present .dash { stroke-dasharray: 2 2; stroke-dashoffset: 100; opacity: 0; }
|
|
375
|
+
.stage.in-view .vis-present .dash { animation: dashFlow 2s linear 1s infinite, fadeIn 0.3s 0.8s both; }
|
|
376
|
+
@keyframes dashFlow { to { stroke-dashoffset: 0; } }
|
|
377
|
+
|
|
378
|
+
/* ─────────────────────────────────────────────
|
|
379
|
+
STAGE 4: CAM — toolpath trace + moving spindle
|
|
380
|
+
───────────────────────────────────────────── */
|
|
381
|
+
.vis-cam { background: linear-gradient(135deg, rgba(16,185,129,0.1), var(--bg-alt)); }
|
|
382
|
+
.vis-cam .toolpath { stroke-dasharray: 800; stroke-dashoffset: 800; }
|
|
383
|
+
.stage.in-view .vis-cam .toolpath { animation: draw 3s linear forwards, pulseLine 2s ease-in-out 3s infinite; }
|
|
384
|
+
@keyframes pulseLine { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
|
|
385
|
+
.vis-cam .spindle { transform: translate(50px, 35px); transition: transform 3s linear; }
|
|
386
|
+
.stage.in-view .vis-cam .spindle {
|
|
387
|
+
animation: spindleTravel 5s var(--ease-soft) forwards;
|
|
388
|
+
}
|
|
389
|
+
@keyframes spindleTravel {
|
|
390
|
+
0% { transform: translate(50px, 35px); }
|
|
391
|
+
25% { transform: translate(150px, 35px); }
|
|
392
|
+
50% { transform: translate(150px, 50px); }
|
|
393
|
+
75% { transform: translate(50px, 50px); }
|
|
394
|
+
100% { transform: translate(100px, 35px); }
|
|
395
|
+
}
|
|
396
|
+
.vis-cam .chip {
|
|
397
|
+
opacity: 0;
|
|
398
|
+
animation: chipFly 1.2s ease-in-out infinite;
|
|
399
|
+
}
|
|
400
|
+
.stage.in-view .vis-cam .chip { opacity: 1; animation-delay: 3s; }
|
|
401
|
+
@keyframes chipFly {
|
|
402
|
+
0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
|
|
403
|
+
30% { opacity: 1; }
|
|
404
|
+
100% { transform: translate(15px, -30px) rotate(140deg) scale(1); opacity: 0; }
|
|
405
|
+
}
|
|
406
|
+
.vis-cam .ab-circle { transform-origin: 100px 75px; animation: abRotate 20s linear infinite; opacity: 0.4; }
|
|
407
|
+
@keyframes abRotate { to { transform: rotate(360deg); } }
|
|
408
|
+
|
|
409
|
+
/* ─────────────────────────────────────────────
|
|
410
|
+
STAGE 5: PRODUCE — browser → bridge → machine data flow
|
|
411
|
+
───────────────────────────────────────────── */
|
|
412
|
+
.vis-produce { background: radial-gradient(circle at 50% 100%, rgba(16,185,129,0.18), transparent 60%), var(--bg-alt); }
|
|
413
|
+
.vis-produce .packet {
|
|
414
|
+
opacity: 0;
|
|
415
|
+
}
|
|
416
|
+
.stage.in-view .vis-produce .packet-down { animation: packetDown 2.4s linear 0.5s infinite; }
|
|
417
|
+
.stage.in-view .vis-produce .packet-up { animation: packetUp 2.4s linear 1.7s infinite; }
|
|
418
|
+
@keyframes packetDown { 0% { opacity: 0; transform: translate(60px, 60px); } 10% { opacity: 1; } 45% { transform: translate(100px, 60px); opacity: 1; } 55% { opacity: 0; } 60% { opacity: 1; transform: translate(140px, 60px); } 100% { transform: translate(155px, 60px); opacity: 0; } }
|
|
419
|
+
@keyframes packetUp { 0% { opacity: 0; transform: translate(155px, 70px); } 10% { opacity: 1; } 45% { transform: translate(100px, 70px); opacity: 1; } 55% { opacity: 0; } 60% { opacity: 1; transform: translate(60px, 70px); } 100% { transform: translate(50px, 70px); opacity: 0; } }
|
|
420
|
+
.vis-produce .dro-val { animation: droFlicker 0.8s steps(3, end) infinite; }
|
|
421
|
+
@keyframes droFlicker {
|
|
422
|
+
0% { content: 'X 1.204'; }
|
|
423
|
+
33% { content: 'X 1.208'; }
|
|
424
|
+
66% { content: 'X 1.211'; }
|
|
425
|
+
100% { content: 'X 1.215'; }
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
/* ─────────────────────────────────────────────
|
|
429
|
+
PRODUCTS GRID
|
|
430
|
+
───────────────────────────────────────────── */
|
|
431
|
+
section.products-section { padding: 120px 0; background: var(--bg-alt); position: relative; }
|
|
432
|
+
section.products-section::before {
|
|
433
|
+
content: ''; position: absolute; inset: 0;
|
|
434
|
+
background-image:
|
|
435
|
+
radial-gradient(circle at 15% 30%, rgba(212,168,67,0.08), transparent 40%),
|
|
436
|
+
radial-gradient(circle at 85% 70%, rgba(16,185,129,0.08), transparent 40%);
|
|
437
|
+
pointer-events: none;
|
|
438
|
+
}
|
|
439
|
+
.products-section .wrap { position: relative; z-index: 1; }
|
|
440
|
+
.products-section .section-kicker {
|
|
441
|
+
display: block; text-align: center; font-size: 11px; letter-spacing: 4px;
|
|
442
|
+
color: var(--gold); text-transform: uppercase; font-weight: 700; margin-bottom: 14px;
|
|
443
|
+
}
|
|
444
|
+
.products-section h2 {
|
|
445
|
+
font-family: 'Fraunces', Georgia, serif; font-size: clamp(38px, 5vw, 56px);
|
|
446
|
+
text-align: center; margin-bottom: 14px; letter-spacing: -0.03em; line-height: 1.1;
|
|
447
|
+
}
|
|
448
|
+
.products-section h2 em { font-style: italic; color: var(--gold); font-weight: 400; }
|
|
449
|
+
.products-section .sub {
|
|
450
|
+
color: var(--text-2); text-align: center; font-size: 18px; margin-bottom: 60px;
|
|
451
|
+
max-width: 600px; margin-left: auto; margin-right: auto;
|
|
452
|
+
}
|
|
453
|
+
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
|
|
454
|
+
@media (max-width: 900px) { .products-grid { grid-template-columns: 1fr; } }
|
|
455
|
+
|
|
456
|
+
.product-card {
|
|
457
|
+
background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
|
|
458
|
+
padding: 32px; transition: transform var(--t-med) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease);
|
|
459
|
+
position: relative; overflow: hidden;
|
|
460
|
+
opacity: 0; transform: translateY(32px);
|
|
461
|
+
}
|
|
462
|
+
.products-section.in-view .product-card { opacity: 1; transform: translateY(0); transition-duration: var(--t-slow), var(--t-fast), var(--t-med); }
|
|
463
|
+
.products-section.in-view .product-card:nth-child(1) { transition-delay: 0.15s; }
|
|
464
|
+
.products-section.in-view .product-card:nth-child(2) { transition-delay: 0.3s; }
|
|
465
|
+
.products-section.in-view .product-card:nth-child(3) { transition-delay: 0.45s; }
|
|
466
|
+
|
|
467
|
+
.product-card::before {
|
|
468
|
+
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
|
|
469
|
+
transition: height var(--t-fast) var(--ease);
|
|
470
|
+
}
|
|
471
|
+
.product-card:hover { transform: translateY(-8px); border-color: var(--border-hi); box-shadow: 0 40px 80px -20px rgba(0,0,0,0.4); }
|
|
472
|
+
.product-card:hover::before { height: 6px; }
|
|
473
|
+
.p-cyclecad::before { background: linear-gradient(90deg, var(--gold), var(--gold-2)); }
|
|
474
|
+
.p-explodeview::before { background: linear-gradient(90deg, var(--teal), #56D1CC); }
|
|
475
|
+
.p-pentacad::before { background: linear-gradient(90deg, var(--emerald), #34D399); }
|
|
476
|
+
|
|
477
|
+
.product-card .status {
|
|
478
|
+
position: absolute; top: 20px; right: 20px; font-size: 10px; font-weight: 800;
|
|
479
|
+
letter-spacing: 1.5px; padding: 4px 10px; border-radius: 100px; text-transform: uppercase;
|
|
480
|
+
}
|
|
481
|
+
.status.live { background: rgba(16,185,129,0.18); color: var(--emerald); }
|
|
482
|
+
.status.live::before { content: '●'; margin-right: 4px; animation: pulse 1.5s ease-in-out infinite; }
|
|
483
|
+
.status.coming { background: rgba(245,158,11,0.18); color: var(--amber); }
|
|
484
|
+
|
|
485
|
+
.product-card .pname {
|
|
486
|
+
font-family: 'Fraunces', Georgia, serif; font-size: 32px; font-weight: 700;
|
|
487
|
+
margin-bottom: 6px; letter-spacing: -0.02em;
|
|
488
|
+
}
|
|
489
|
+
.p-cyclecad .pname { color: var(--gold); }
|
|
490
|
+
.p-explodeview .pname { color: var(--teal); }
|
|
491
|
+
.p-pentacad .pname { color: var(--emerald); }
|
|
492
|
+
|
|
493
|
+
.product-card .ptag { font-size: 11px; color: var(--text-3); margin-bottom: 22px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
|
|
494
|
+
.product-card p.pdesc { color: var(--text-2); font-size: 15px; margin-bottom: 22px; line-height: 1.6; }
|
|
495
|
+
.product-card ul { list-style: none; margin-bottom: 28px; }
|
|
496
|
+
.product-card li {
|
|
497
|
+
padding: 7px 0; color: var(--text); font-size: 14px;
|
|
498
|
+
display: flex; align-items: flex-start; gap: 10px;
|
|
499
|
+
opacity: 0; transform: translateX(-8px);
|
|
500
|
+
}
|
|
501
|
+
.products-section.in-view .product-card li { opacity: 1; transform: translateX(0); transition: all var(--t-med) var(--ease); }
|
|
502
|
+
.product-card li::before { content: '→'; color: var(--gold); font-weight: 800; flex-shrink: 0; }
|
|
503
|
+
.product-card .p-cta { display: flex; gap: 10px; }
|
|
504
|
+
.product-card .p-cta a {
|
|
505
|
+
font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: 6px;
|
|
506
|
+
border: 1px solid var(--border); transition: all var(--t-fast) var(--ease);
|
|
507
|
+
}
|
|
508
|
+
.product-card .p-cta a.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
|
|
509
|
+
.product-card .p-cta a:hover { transform: translateY(-2px); }
|
|
510
|
+
.product-card .p-cta a.primary:hover { box-shadow: 0 10px 25px -6px rgba(240,240,232,0.3); }
|
|
511
|
+
|
|
512
|
+
/* ─────────────────────────────────────────────
|
|
513
|
+
STATS
|
|
514
|
+
───────────────────────────────────────────── */
|
|
515
|
+
section.stats { padding: 80px 0; }
|
|
516
|
+
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
|
|
517
|
+
@media (max-width: 700px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
|
|
518
|
+
.stat-card {
|
|
519
|
+
padding: 32px 20px; border: 1px solid var(--border); border-radius: 12px;
|
|
520
|
+
background: var(--bg-alt); transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
|
|
521
|
+
opacity: 0; transform: scale(0.92);
|
|
522
|
+
}
|
|
523
|
+
section.stats.in-view .stat-card { opacity: 1; transform: scale(1); transition: all var(--t-slow) var(--ease); }
|
|
524
|
+
section.stats.in-view .stat-card:nth-child(1) { transition-delay: 0.1s; }
|
|
525
|
+
section.stats.in-view .stat-card:nth-child(2) { transition-delay: 0.2s; }
|
|
526
|
+
section.stats.in-view .stat-card:nth-child(3) { transition-delay: 0.3s; }
|
|
527
|
+
section.stats.in-view .stat-card:nth-child(4) { transition-delay: 0.4s; }
|
|
528
|
+
|
|
529
|
+
.stat-card:hover { transform: translateY(-4px); border-color: var(--gold); }
|
|
530
|
+
.stat-card .n {
|
|
531
|
+
font-family: 'Fraunces', Georgia, serif; font-size: 48px; font-weight: 700;
|
|
532
|
+
background: linear-gradient(135deg, var(--gold), var(--gold-2));
|
|
533
|
+
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
534
|
+
line-height: 1; margin-bottom: 8px;
|
|
535
|
+
}
|
|
536
|
+
.stat-card .l { font-size: 12px; color: var(--text-2); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; }
|
|
537
|
+
|
|
538
|
+
/* ─────────────────────────────────────────────
|
|
539
|
+
CTA BLOCK
|
|
540
|
+
───────────────────────────────────────────── */
|
|
541
|
+
section.cta-block {
|
|
542
|
+
padding: 100px 0; text-align: center; background: var(--bg-alt);
|
|
543
|
+
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
|
|
544
|
+
position: relative; overflow: hidden;
|
|
545
|
+
}
|
|
546
|
+
section.cta-block::before {
|
|
547
|
+
content: ''; position: absolute; inset: 0;
|
|
548
|
+
background: radial-gradient(ellipse at center top, rgba(212,168,67,0.15), transparent 50%);
|
|
549
|
+
pointer-events: none;
|
|
550
|
+
}
|
|
551
|
+
section.cta-block .wrap { position: relative; z-index: 1; }
|
|
552
|
+
section.cta-block h2 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(36px, 5vw, 56px); margin-bottom: 18px; letter-spacing: -0.02em; line-height: 1.1; }
|
|
553
|
+
section.cta-block h2 em { font-style: italic; color: var(--gold); font-weight: 400; }
|
|
554
|
+
section.cta-block p { color: var(--text-2); font-size: 18px; max-width: 620px; margin: 0 auto 32px; }
|
|
555
|
+
section.cta-block .ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
|
|
556
|
+
|
|
557
|
+
/* ─────────────────────────────────────────────
|
|
558
|
+
FOUNDER
|
|
559
|
+
───────────────────────────────────────────── */
|
|
560
|
+
section.founder { padding: 100px 0; }
|
|
561
|
+
.note-box {
|
|
562
|
+
max-width: 760px; margin: 0 auto;
|
|
563
|
+
background: var(--bg-alt); border: 1px solid var(--border);
|
|
564
|
+
padding: 48px 48px 40px; border-radius: 16px;
|
|
565
|
+
position: relative;
|
|
566
|
+
}
|
|
567
|
+
.note-box::before {
|
|
568
|
+
content: '"'; position: absolute; top: 14px; left: 26px;
|
|
569
|
+
font-size: 100px; color: var(--gold); font-family: 'Fraunces', serif;
|
|
570
|
+
line-height: 1; opacity: 0.4;
|
|
571
|
+
}
|
|
572
|
+
.note-box p { color: var(--text); font-size: 18px; line-height: 1.7; font-style: italic; padding-left: 32px; margin-bottom: 20px; }
|
|
573
|
+
.note-box .sig {
|
|
574
|
+
padding-left: 32px; display: flex; align-items: center; gap: 14px;
|
|
575
|
+
}
|
|
576
|
+
.note-box .sig .avatar {
|
|
577
|
+
width: 44px; height: 44px; border-radius: 50%;
|
|
578
|
+
background: linear-gradient(135deg, var(--gold), var(--blue));
|
|
579
|
+
display: grid; place-items: center; font-weight: 700; color: var(--bg);
|
|
580
|
+
}
|
|
581
|
+
.note-box .sig .name { color: var(--text); font-weight: 700; font-size: 14px; }
|
|
582
|
+
.note-box .sig .role { color: var(--text-3); font-size: 12px; }
|
|
583
|
+
|
|
584
|
+
/* ─────────────────────────────────────────────
|
|
585
|
+
FOOTER
|
|
586
|
+
───────────────────────────────────────────── */
|
|
587
|
+
footer { padding: 64px 0 40px; border-top: 1px solid var(--border); background: var(--bg); color: var(--text-3); font-size: 13px; }
|
|
588
|
+
footer .row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 32px; }
|
|
589
|
+
@media (max-width: 700px) { footer .row { grid-template-columns: repeat(2, 1fr); } }
|
|
590
|
+
footer .brand-col { }
|
|
591
|
+
footer .brand-col .brand {
|
|
592
|
+
font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 20px;
|
|
593
|
+
color: var(--text); margin-bottom: 12px; display: block;
|
|
594
|
+
}
|
|
595
|
+
footer .brand-col .brand em { color: var(--gold); font-style: normal; }
|
|
596
|
+
footer .brand-col p { font-size: 13px; color: var(--text-3); max-width: 280px; line-height: 1.5; }
|
|
597
|
+
footer .col h4 { color: var(--text); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; }
|
|
598
|
+
footer .col a { display: block; padding: 5px 0; color: var(--text-2); transition: color var(--t-fast); }
|
|
599
|
+
footer .col a:hover { color: var(--text); }
|
|
600
|
+
footer .legal { padding-top: 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; color: var(--text-3); font-size: 12px; }
|
|
601
|
+
|
|
602
|
+
/* ─────────────────────────────────────────────
|
|
603
|
+
FLOATING SCROLL HINT
|
|
604
|
+
───────────────────────────────────────────── */
|
|
605
|
+
.scroll-hint {
|
|
606
|
+
position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%);
|
|
607
|
+
color: var(--text-3); font-size: 11px; letter-spacing: 2px; font-weight: 600;
|
|
608
|
+
text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 6px;
|
|
609
|
+
pointer-events: none; opacity: 0; transition: opacity var(--t-med);
|
|
610
|
+
z-index: 40;
|
|
611
|
+
}
|
|
612
|
+
.scroll-hint.show { opacity: 1; animation: bob 2s ease-in-out infinite; }
|
|
613
|
+
.scroll-hint::after { content: '↓'; font-size: 16px; }
|
|
614
|
+
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
|
|
615
|
+
|
|
616
|
+
/* ─────────────────────────────────────────────
|
|
617
|
+
END-TO-END JOURNEYS
|
|
618
|
+
───────────────────────────────────────────── */
|
|
619
|
+
section.journeys { padding: 110px 0; position: relative; background: linear-gradient(180deg, var(--bg) 0%, rgba(18,34,64,0.35) 60%, var(--bg) 100%); border-bottom: 1px solid var(--border); overflow: hidden; }
|
|
620
|
+
section.journeys::before {
|
|
621
|
+
content: ''; position: absolute; inset: 0;
|
|
622
|
+
background-image:
|
|
623
|
+
radial-gradient(800px circle at 10% 20%, rgba(139,111,192,0.06), transparent 40%),
|
|
624
|
+
radial-gradient(700px circle at 90% 80%, rgba(58,175,169,0.05), transparent 40%);
|
|
625
|
+
pointer-events: none;
|
|
626
|
+
}
|
|
627
|
+
.journeys .wrap { position: relative; z-index: 1; }
|
|
628
|
+
.journeys .jhead { text-align: center; margin-bottom: 56px; }
|
|
629
|
+
.journeys .section-kicker { display: block; font-size: 11px; letter-spacing: 4px; color: var(--purple); text-transform: uppercase; font-weight: 700; margin-bottom: 14px; }
|
|
630
|
+
.journeys h2 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(36px, 5vw, 54px); letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 14px; }
|
|
631
|
+
.journeys h2 em { font-style: italic; color: var(--gold); font-weight: 400; }
|
|
632
|
+
.journeys .sub { color: var(--text-2); font-size: 17px; max-width: 620px; margin: 0 auto; }
|
|
633
|
+
|
|
634
|
+
.journey-stack { display: flex; flex-direction: column; gap: 24px; margin-top: 56px; }
|
|
635
|
+
|
|
636
|
+
.journey {
|
|
637
|
+
background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px;
|
|
638
|
+
padding: 20px 24px; position: relative; overflow: hidden;
|
|
639
|
+
opacity: 0; transform: translateY(24px);
|
|
640
|
+
transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), border-color var(--t-fast) var(--ease);
|
|
641
|
+
}
|
|
642
|
+
.journeys.in-view .journey { opacity: 1; transform: translateY(0); }
|
|
643
|
+
.journeys.in-view .journey:nth-child(1) { transition-delay: 0.1s; }
|
|
644
|
+
.journeys.in-view .journey:nth-child(2) { transition-delay: 0.25s; }
|
|
645
|
+
.journeys.in-view .journey:nth-child(3) { transition-delay: 0.4s; }
|
|
646
|
+
.journey:hover { border-color: var(--border-hi); }
|
|
647
|
+
|
|
648
|
+
.journey-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; margin-bottom: 18px; }
|
|
649
|
+
.jicon { width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; font-size: 26px; background: rgba(212,168,67,0.1); border: 1px solid rgba(212,168,67,0.3); }
|
|
650
|
+
.journey[data-journey="bell"] .jicon { background: rgba(139,111,192,0.1); border-color: rgba(139,111,192,0.35); }
|
|
651
|
+
.journey[data-journey="flange"] .jicon { background: rgba(58,175,169,0.1); border-color: rgba(58,175,169,0.35); }
|
|
652
|
+
.journey[data-journey="opener"] .jicon { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.35); }
|
|
653
|
+
|
|
654
|
+
.jname { font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; line-height: 1.2; }
|
|
655
|
+
.jtag { font-size: 12px; color: var(--text-3); letter-spacing: 1px; font-weight: 500; margin-top: 2px; }
|
|
656
|
+
.jtimer { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 100px; background: rgba(10,22,40,0.6); border: 1px solid var(--border); font-size: 11px; letter-spacing: 2px; color: var(--text-2); font-family: 'JetBrains Mono', monospace; font-weight: 700; }
|
|
657
|
+
.jtimer-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 6px var(--emerald); animation: pulse 1.5s ease-in-out infinite; }
|
|
658
|
+
|
|
659
|
+
/* Step track */
|
|
660
|
+
.journey-track {
|
|
661
|
+
display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
|
|
662
|
+
position: relative;
|
|
663
|
+
}
|
|
664
|
+
.journey-track::before {
|
|
665
|
+
content: ''; position: absolute;
|
|
666
|
+
top: 50%; left: 0; right: 0; height: 2px;
|
|
667
|
+
background: var(--border); z-index: 0;
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
.jstep {
|
|
671
|
+
position: relative; z-index: 1;
|
|
672
|
+
padding: 14px 10px; background: var(--bg-card);
|
|
673
|
+
border: 1px solid var(--border); border-radius: 10px;
|
|
674
|
+
transition: all var(--t-med) var(--ease);
|
|
675
|
+
min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px;
|
|
676
|
+
}
|
|
677
|
+
.jstep .jstep-name { font-size: 10px; font-weight: 800; letter-spacing: 2px; color: var(--text-3); text-transform: uppercase; transition: color var(--t-fast); }
|
|
678
|
+
.jstep .jstep-vis { flex: 1; width: 100%; display: grid; place-items: center; min-height: 56px; position: relative; }
|
|
679
|
+
.jstep .jstep-vis svg { width: 100%; height: 56px; max-width: 100px; }
|
|
680
|
+
.jstep .jstep-meta { font-size: 10px; color: var(--text-3); text-align: center; font-family: 'JetBrains Mono', monospace; line-height: 1.3; min-height: 24px; word-break: break-word; }
|
|
681
|
+
|
|
682
|
+
.jstep.active { border-color: currentColor; background: rgba(212,168,67,0.05); transform: translateY(-4px); box-shadow: 0 18px 40px -12px currentColor; }
|
|
683
|
+
.journey[data-journey="bell"] .jstep.active { color: var(--purple); background: rgba(139,111,192,0.06); }
|
|
684
|
+
.journey[data-journey="flange"] .jstep.active { color: var(--teal); background: rgba(58,175,169,0.06); }
|
|
685
|
+
.journey[data-journey="opener"] .jstep.active { color: var(--emerald); background: rgba(16,185,129,0.06); }
|
|
686
|
+
|
|
687
|
+
.jstep.active .jstep-name { color: currentColor; }
|
|
688
|
+
.jstep.active .jstep-meta { color: var(--text); }
|
|
689
|
+
.jstep.done::after {
|
|
690
|
+
content: '✓'; position: absolute; top: 8px; right: 8px;
|
|
691
|
+
width: 16px; height: 16px; border-radius: 50%;
|
|
692
|
+
background: var(--emerald); color: var(--bg);
|
|
693
|
+
font-size: 10px; font-weight: 800; display: grid; place-items: center;
|
|
694
|
+
animation: popIn 0.3s var(--ease) forwards;
|
|
695
|
+
}
|
|
696
|
+
@keyframes popIn { 0% { transform: scale(0); } 80% { transform: scale(1.3); } 100% { transform: scale(1); } }
|
|
697
|
+
|
|
698
|
+
/* Step visual animations — each plays only when .active */
|
|
699
|
+
.jstep .vis-idea .bulb { transition: transform 0.4s var(--ease), filter 0.4s; filter: grayscale(0.7) opacity(0.5); }
|
|
700
|
+
.jstep.active .vis-idea .bulb { transform: scale(1.15); filter: grayscale(0) opacity(1) drop-shadow(0 0 8px currentColor); animation: flicker 1.6s ease-in-out infinite; }
|
|
701
|
+
@keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }
|
|
702
|
+
|
|
703
|
+
.jstep .vis-design .d-path { stroke-dasharray: 300; stroke-dashoffset: 300; }
|
|
704
|
+
.jstep.active .vis-design .d-path { animation: dDraw 1.6s ease-out forwards; }
|
|
705
|
+
@keyframes dDraw { to { stroke-dashoffset: 0; } }
|
|
706
|
+
.jstep.active .vis-design .d-fill { animation: dFill 1.6s ease-out 0.5s forwards; }
|
|
707
|
+
.jstep .vis-design .d-fill { opacity: 0; }
|
|
708
|
+
@keyframes dFill { to { opacity: 0.35; } }
|
|
709
|
+
|
|
710
|
+
.jstep .vis-market .m-card { transition: transform 0.6s var(--ease), opacity 0.6s; opacity: 0.5; transform: scale(0.9); }
|
|
711
|
+
.jstep.active .vis-market .m-card { opacity: 1; transform: scale(1); }
|
|
712
|
+
.jstep .vis-market .m-star { transition: opacity 0.3s var(--ease); opacity: 0.3; }
|
|
713
|
+
.jstep.active .vis-market .m-star { opacity: 1; animation: starPop 0.3s ease-out both; }
|
|
714
|
+
.jstep.active .vis-market .m-star-1 { animation-delay: 0.4s; }
|
|
715
|
+
.jstep.active .vis-market .m-star-2 { animation-delay: 0.55s; }
|
|
716
|
+
.jstep.active .vis-market .m-star-3 { animation-delay: 0.7s; }
|
|
717
|
+
.jstep.active .vis-market .m-star-4 { animation-delay: 0.85s; }
|
|
718
|
+
.jstep.active .vis-market .m-star-5 { animation-delay: 1.0s; }
|
|
719
|
+
@keyframes starPop { 0% { transform: scale(0.2); opacity: 0; } 80% { transform: scale(1.3); } 100% { transform: scale(1); opacity: 1; } }
|
|
720
|
+
|
|
721
|
+
.jstep .vis-sell .s-cart { transform: translateY(6px); opacity: 0.5; transition: all 0.5s var(--ease); }
|
|
722
|
+
.jstep.active .vis-sell .s-cart { transform: translateY(0); opacity: 1; }
|
|
723
|
+
.jstep .vis-sell .s-count { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 700; fill: currentColor; opacity: 0.5; }
|
|
724
|
+
.jstep.active .vis-sell .s-count { opacity: 1; animation: countUp 2s ease-out; }
|
|
725
|
+
|
|
726
|
+
.jstep .vis-mfg .m-spindle { transition: transform 0.5s var(--ease); }
|
|
727
|
+
.jstep.active .vis-mfg .m-spindle { animation: mfgTravel 2.2s ease-in-out infinite; }
|
|
728
|
+
@keyframes mfgTravel {
|
|
729
|
+
0% { transform: translate(20px, 18px); }
|
|
730
|
+
50% { transform: translate(70px, 18px); }
|
|
731
|
+
100% { transform: translate(20px, 18px); }
|
|
732
|
+
}
|
|
733
|
+
.jstep .vis-mfg .m-chip { opacity: 0; }
|
|
734
|
+
.jstep.active .vis-mfg .m-chip { animation: mfgChip 0.8s ease-out infinite; }
|
|
735
|
+
@keyframes mfgChip {
|
|
736
|
+
0% { opacity: 0; transform: translate(40px, 36px) scale(0.4); }
|
|
737
|
+
30% { opacity: 1; }
|
|
738
|
+
100% { opacity: 0; transform: translate(60px, 10px) rotate(140deg) scale(1); }
|
|
739
|
+
}
|
|
740
|
+
.jstep .vis-mfg .m-path { stroke-dasharray: 100; stroke-dashoffset: 100; }
|
|
741
|
+
.jstep.active .vis-mfg .m-path { animation: dDraw 2s ease-out forwards; }
|
|
742
|
+
|
|
743
|
+
.jstep .vis-feedback .fb-bubble { transform: translateX(-10px); opacity: 0.3; transition: all 0.5s var(--ease); }
|
|
744
|
+
.jstep.active .vis-feedback .fb-bubble { transform: translateX(0); opacity: 1; }
|
|
745
|
+
.jstep .vis-feedback .fb-loop { stroke-dasharray: 120; stroke-dashoffset: 120; }
|
|
746
|
+
.jstep.active .vis-feedback .fb-loop { animation: dDraw 1.6s ease-in-out 0.4s forwards; }
|
|
747
|
+
|
|
748
|
+
/* Step arrows between cells */
|
|
749
|
+
.jstep-arrow {
|
|
750
|
+
position: absolute; top: 50%; right: -10px; transform: translateY(-50%);
|
|
751
|
+
width: 20px; height: 14px; display: grid; place-items: center; z-index: 2;
|
|
752
|
+
color: var(--text-3); font-size: 14px; font-weight: 700;
|
|
753
|
+
background: var(--bg-alt); padding: 0 2px;
|
|
754
|
+
transition: color var(--t-fast);
|
|
755
|
+
}
|
|
756
|
+
.jstep.done + .jstep .jstep-arrow { color: var(--emerald); }
|
|
757
|
+
.jstep:last-child .jstep-arrow { display: none; }
|
|
758
|
+
|
|
759
|
+
@media (max-width: 900px) {
|
|
760
|
+
.journey-track { grid-template-columns: repeat(3, 1fr); }
|
|
761
|
+
.journey-track::before { display: none; }
|
|
762
|
+
.jstep-arrow { display: none !important; }
|
|
763
|
+
}
|
|
764
|
+
@media (max-width: 520px) {
|
|
765
|
+
.journey-track { grid-template-columns: repeat(2, 1fr); }
|
|
766
|
+
}
|
|
767
|
+
|
|
768
|
+
@keyframes countUp { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 1; } }
|
|
769
|
+
</style>
|
|
770
|
+
</head>
|
|
771
|
+
<body>
|
|
91
772
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
773
|
+
<nav>
|
|
774
|
+
<div class="wrap">
|
|
775
|
+
<a href="/" class="brand">
|
|
776
|
+
<span class="logo">⚙</span>
|
|
777
|
+
cycle<em>CAD</em> suite
|
|
778
|
+
</a>
|
|
779
|
+
<div class="links">
|
|
780
|
+
<a href="#stages">Lifecycle</a>
|
|
781
|
+
<a href="#products">Products</a>
|
|
782
|
+
<a href="https://github.com/vvlars-cmd/cyclecad#readme">Docs</a>
|
|
783
|
+
<a href="/app/" class="cta">Launch →</a>
|
|
784
|
+
</div>
|
|
785
|
+
</div>
|
|
786
|
+
</nav>
|
|
787
|
+
|
|
788
|
+
<header class="hero">
|
|
789
|
+
<div class="wrap">
|
|
790
|
+
<div class="kicker">
|
|
791
|
+
<span class="dot"></span>
|
|
792
|
+
One tab · End to end
|
|
793
|
+
</div>
|
|
794
|
+
<h1 class="hero">
|
|
795
|
+
From <em>idea</em> to <em>finished part</em>.<br />
|
|
796
|
+
One browser tab.<span class="cursor"></span>
|
|
797
|
+
</h1>
|
|
798
|
+
<p class="lead">
|
|
799
|
+
Brainstorm with AI · Design in parametric CAD · Ship marketing renders ·
|
|
800
|
+
Generate 5-axis CAM · Stream G-code to your machine — all in one tab, all in the browser.
|
|
801
|
+
</p>
|
|
802
|
+
<div class="hero-ctas">
|
|
803
|
+
<a href="/app/" class="btn btn-primary">Launch the app <span class="arrow">→</span></a>
|
|
804
|
+
<a href="#stages" class="btn btn-secondary">See how it works</a>
|
|
805
|
+
</div>
|
|
806
|
+
</div>
|
|
807
|
+
</header>
|
|
808
|
+
|
|
809
|
+
<!-- LIFECYCLE STRIP -->
|
|
810
|
+
<div class="stages" id="stages" data-animate>
|
|
811
|
+
<div class="wrap">
|
|
812
|
+
<div class="row">
|
|
813
|
+
<a href="#ideate" class="stage-chip"><div class="num">01</div><div class="n">Ideate</div><div class="sub">AI Copilot</div></a>
|
|
814
|
+
<a href="#design" class="stage-chip"><div class="num">02</div><div class="n">Design</div><div class="sub">cycleCAD</div></a>
|
|
815
|
+
<a href="#present" class="stage-chip"><div class="num">03</div><div class="n">Present</div><div class="sub">ExplodeView</div></a>
|
|
816
|
+
<a href="#cam" class="stage-chip"><div class="num">04</div><div class="n">CAM</div><div class="sub">Pentacad</div></a>
|
|
817
|
+
<a href="#produce" class="stage-chip"><div class="num">05</div><div class="n">Produce</div><div class="sub">Bridge</div></a>
|
|
818
|
+
</div>
|
|
819
|
+
</div>
|
|
820
|
+
</div>
|
|
821
|
+
|
|
822
|
+
<!-- ─────────────────────────────────────────────
|
|
823
|
+
END-TO-END JOURNEYS — three real products, six steps each
|
|
824
|
+
───────────────────────────────────────────── -->
|
|
825
|
+
<section class="journeys" data-animate>
|
|
826
|
+
<div class="wrap">
|
|
827
|
+
<div class="jhead">
|
|
828
|
+
<span class="section-kicker">End to End · In Action</span>
|
|
829
|
+
<h2>Three products. <em>Six steps</em>. One tab.</h2>
|
|
830
|
+
<p class="sub">Real parts flowing through the full lifecycle — from a prompt in the morning to a finished part and customer feedback on the same platform.</p>
|
|
831
|
+
</div>
|
|
98
832
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
833
|
+
<div class="journey-stack">
|
|
834
|
+
|
|
835
|
+
<!-- ═══════════════════════════════════════
|
|
836
|
+
JOURNEY 1 — Custom bike bell
|
|
837
|
+
═══════════════════════════════════════ -->
|
|
838
|
+
<div class="journey" data-journey="bell">
|
|
839
|
+
<div class="journey-head">
|
|
840
|
+
<div class="jicon">🔔</div>
|
|
841
|
+
<div class="jmeta">
|
|
842
|
+
<div class="jname">Custom bike bell</div>
|
|
843
|
+
<div class="jtag">Consumer · 6 days total · €345 revenue from 23 pre-orders</div>
|
|
844
|
+
</div>
|
|
845
|
+
<div class="jtimer"><span class="jtimer-dot"></span><span>STEP <span class="jstep-n">1</span>/6</span></div>
|
|
846
|
+
</div>
|
|
847
|
+
<div class="journey-track">
|
|
848
|
+
|
|
849
|
+
<div class="jstep" data-step="0">
|
|
850
|
+
<div class="jstep-name">Ideate</div>
|
|
851
|
+
<div class="jstep-vis">
|
|
852
|
+
<svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
|
|
853
|
+
<g class="vis-idea">
|
|
854
|
+
<g class="bulb" style="color: #8B6FC0">
|
|
855
|
+
<path d="M40 8 C28 8 22 17 24 28 C25 33 28 36 30 40 L50 40 C52 36 55 33 56 28 C58 17 52 8 40 8 Z" fill="currentColor" fill-opacity="0.2" stroke="currentColor" stroke-width="1.4"/>
|
|
856
|
+
<rect x="32" y="40" width="16" height="4" fill="currentColor"/>
|
|
857
|
+
<rect x="34" y="45" width="12" height="2" fill="currentColor" opacity="0.7"/>
|
|
858
|
+
<path d="M38 18 L40 24 L42 18" stroke="#F0F0E8" stroke-width="1" fill="none" stroke-linecap="round"/>
|
|
859
|
+
</g>
|
|
860
|
+
</g>
|
|
861
|
+
</svg>
|
|
862
|
+
</div>
|
|
863
|
+
<div class="jstep-meta">"bike bell with my logo"</div>
|
|
864
|
+
<div class="jstep-arrow">›</div>
|
|
865
|
+
</div>
|
|
104
866
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
867
|
+
<div class="jstep" data-step="1">
|
|
868
|
+
<div class="jstep-name">Design</div>
|
|
869
|
+
<div class="jstep-vis">
|
|
870
|
+
<svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
|
|
871
|
+
<g class="vis-design">
|
|
872
|
+
<circle class="d-fill" cx="40" cy="28" r="16" fill="#8B6FC0"/>
|
|
873
|
+
<circle class="d-path" cx="40" cy="28" r="16" fill="none" stroke="#8B6FC0" stroke-width="1.4"/>
|
|
874
|
+
<circle class="d-path" cx="40" cy="28" r="10" fill="none" stroke="#8B6FC0" stroke-width="1" opacity="0.6"/>
|
|
875
|
+
<circle class="d-path" cx="40" cy="28" r="4" fill="none" stroke="#8B6FC0" stroke-width="0.8" opacity="0.5"/>
|
|
876
|
+
<path class="d-path" d="M40 12 L40 44 M24 28 L56 28" stroke="#8B6FC0" stroke-width="0.4" opacity="0.3" stroke-dasharray="2 2"/>
|
|
877
|
+
</g>
|
|
878
|
+
</svg>
|
|
879
|
+
</div>
|
|
880
|
+
<div class="jstep-meta">Ø 52 mm · 14 g · 1 part</div>
|
|
881
|
+
<div class="jstep-arrow">›</div>
|
|
882
|
+
</div>
|
|
110
883
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
884
|
+
<div class="jstep" data-step="2">
|
|
885
|
+
<div class="jstep-name">Market</div>
|
|
886
|
+
<div class="jstep-vis">
|
|
887
|
+
<svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
|
|
888
|
+
<g class="vis-market">
|
|
889
|
+
<g class="m-card">
|
|
890
|
+
<rect x="18" y="8" width="44" height="32" rx="4" fill="#1A2D50" stroke="#8B6FC0" stroke-width="1"/>
|
|
891
|
+
<circle cx="40" cy="22" r="7" fill="#8B6FC0" fill-opacity="0.4" stroke="#8B6FC0" stroke-width="0.8"/>
|
|
892
|
+
<rect x="22" y="32" width="36" height="2" fill="#8B6FC0" opacity="0.5"/>
|
|
893
|
+
</g>
|
|
894
|
+
<g class="m-stars" transform="translate(18 46)">
|
|
895
|
+
<path class="m-star m-star-1" d="M5 0 L6 3 L9 3 L7 5 L8 8 L5 7 L2 8 L3 5 L1 3 L4 3 Z" fill="#F59E0B"/>
|
|
896
|
+
<path class="m-star m-star-2" d="M15 0 L16 3 L19 3 L17 5 L18 8 L15 7 L12 8 L13 5 L11 3 L14 3 Z" fill="#F59E0B"/>
|
|
897
|
+
<path class="m-star m-star-3" d="M25 0 L26 3 L29 3 L27 5 L28 8 L25 7 L22 8 L23 5 L21 3 L24 3 Z" fill="#F59E0B"/>
|
|
898
|
+
<path class="m-star m-star-4" d="M35 0 L36 3 L39 3 L37 5 L38 8 L35 7 L32 8 L33 5 L31 3 L34 3 Z" fill="#F59E0B"/>
|
|
899
|
+
<path class="m-star m-star-5" d="M45 0 L46 3 L49 3 L47 5 L48 8 L45 7 L42 8 L43 5 L41 3 L44 3 Z" fill="#F59E0B"/>
|
|
900
|
+
</g>
|
|
901
|
+
</g>
|
|
902
|
+
</svg>
|
|
903
|
+
</div>
|
|
904
|
+
<div class="jstep-meta">Listed + AI render</div>
|
|
905
|
+
<div class="jstep-arrow">›</div>
|
|
906
|
+
</div>
|
|
115
907
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
.nav-logo .cycle { color: var(--text-secondary); font-weight: 400; }
|
|
135
|
-
.nav-logo .cad { color: var(--text-primary); font-weight: 800; }
|
|
136
|
-
.nav-links { display: flex; gap: 32px; align-items: center; list-style: none; }
|
|
137
|
-
.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.2s; }
|
|
138
|
-
.nav-links a:hover { color: var(--text-primary); }
|
|
139
|
-
.nav-cta { padding: 8px 20px; background: var(--accent-gradient); color: #000 !important; border-radius: 8px; font-weight: 600 !important; font-size: 0.85rem !important; transition: opacity 0.2s !important; }
|
|
140
|
-
.nav-cta:hover { opacity: 0.9; }
|
|
141
|
-
|
|
142
|
-
/* ============================================================
|
|
143
|
-
HERO
|
|
144
|
-
============================================================ */
|
|
145
|
-
.hero {
|
|
146
|
-
min-height: 100vh; display: flex; flex-direction: column;
|
|
147
|
-
align-items: center; justify-content: center; text-align: center;
|
|
148
|
-
padding-top: 80px; position: relative; overflow: hidden;
|
|
149
|
-
}
|
|
150
|
-
.hero::before {
|
|
151
|
-
content: ''; position: absolute; top: -200px; left: -200px;
|
|
152
|
-
width: 600px; height: 600px;
|
|
153
|
-
background: radial-gradient(circle, rgba(212,168,67,0.1) 0%, transparent 70%);
|
|
154
|
-
animation: pulse1 8s ease-in-out infinite;
|
|
155
|
-
}
|
|
156
|
-
.hero::after {
|
|
157
|
-
content: ''; position: absolute; bottom: -200px; right: -200px;
|
|
158
|
-
width: 600px; height: 600px;
|
|
159
|
-
background: radial-gradient(circle, rgba(46,134,222,0.08) 0%, transparent 70%);
|
|
160
|
-
animation: pulse2 10s ease-in-out infinite;
|
|
161
|
-
}
|
|
162
|
-
@keyframes pulse1 { 0%,100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.2); opacity: 1; } }
|
|
163
|
-
@keyframes pulse2 { 0%,100% { transform: scale(1.1); opacity: 0.5; } 50% { transform: scale(0.9); opacity: 0.8; } }
|
|
164
|
-
|
|
165
|
-
.hero-badge {
|
|
166
|
-
display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px;
|
|
167
|
-
background: rgba(212,168,67,0.08); border: 1px solid rgba(212,168,67,0.2);
|
|
168
|
-
border-radius: 100px; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 32px;
|
|
169
|
-
position: relative; z-index: 1;
|
|
170
|
-
}
|
|
171
|
-
.hero-badge span { color: var(--accent-gold); font-weight: 600; }
|
|
172
|
-
.hero h1 { font-size: clamp(3rem, 7vw, 5rem); max-width: 900px; margin-bottom: 24px; position: relative; z-index: 1; }
|
|
173
|
-
.hero p { font-size: 1.2rem; color: var(--text-secondary); max-width: 640px; margin-bottom: 40px; line-height: 1.7; position: relative; z-index: 1; }
|
|
174
|
-
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; }
|
|
175
|
-
|
|
176
|
-
.btn-primary {
|
|
177
|
-
display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px;
|
|
178
|
-
background: var(--accent-gradient); color: #000; border: none; border-radius: 10px;
|
|
179
|
-
font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: all 0.2s;
|
|
180
|
-
}
|
|
181
|
-
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
|
|
908
|
+
<div class="jstep" data-step="3">
|
|
909
|
+
<div class="jstep-name">Sell</div>
|
|
910
|
+
<div class="jstep-vis">
|
|
911
|
+
<svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
|
|
912
|
+
<g class="vis-sell">
|
|
913
|
+
<g class="s-cart" transform="translate(20 14)">
|
|
914
|
+
<path d="M0 4 L8 4 L12 24 L34 24 L38 10 L10 10" fill="none" stroke="#8B6FC0" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
|
|
915
|
+
<circle cx="16" cy="32" r="3" fill="#8B6FC0"/>
|
|
916
|
+
<circle cx="32" cy="32" r="3" fill="#8B6FC0"/>
|
|
917
|
+
</g>
|
|
918
|
+
<text class="s-count" x="68" y="22" text-anchor="end">23</text>
|
|
919
|
+
<text x="68" y="34" text-anchor="end" fill="#8B9AB5" font-size="7" font-family="JetBrains Mono">pre-orders</text>
|
|
920
|
+
</g>
|
|
921
|
+
</svg>
|
|
922
|
+
</div>
|
|
923
|
+
<div class="jstep-meta">€345 revenue · 6 days</div>
|
|
924
|
+
<div class="jstep-arrow">›</div>
|
|
925
|
+
</div>
|
|
182
926
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
927
|
+
<div class="jstep" data-step="4">
|
|
928
|
+
<div class="jstep-name">Manufacture</div>
|
|
929
|
+
<div class="jstep-vis">
|
|
930
|
+
<svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
|
|
931
|
+
<g class="vis-mfg">
|
|
932
|
+
<rect x="18" y="28" width="48" height="14" rx="1" fill="#122240" stroke="#1E3A5F" stroke-width="0.8"/>
|
|
933
|
+
<path class="m-path" d="M22 32 L62 32 L62 36 L22 36 L22 40 L62 40" stroke="#8B6FC0" stroke-width="1.2" fill="none"/>
|
|
934
|
+
<g class="m-spindle">
|
|
935
|
+
<rect x="-4" y="-12" width="8" height="14" fill="#5A6B85" stroke="#8B9AB5" stroke-width="0.4" rx="1"/>
|
|
936
|
+
<polygon points="-2,2 2,2 0,6" fill="#F59E0B"/>
|
|
937
|
+
</g>
|
|
938
|
+
<circle class="m-chip" cx="0" cy="0" r="1.2" fill="#F59E0B"/>
|
|
939
|
+
</g>
|
|
940
|
+
</svg>
|
|
941
|
+
</div>
|
|
942
|
+
<div class="jstep-meta">3+2 CAM · V2-50</div>
|
|
943
|
+
<div class="jstep-arrow">›</div>
|
|
944
|
+
</div>
|
|
189
945
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
946
|
+
<div class="jstep" data-step="5">
|
|
947
|
+
<div class="jstep-name">Feedback</div>
|
|
948
|
+
<div class="jstep-vis">
|
|
949
|
+
<svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
|
|
950
|
+
<g class="vis-feedback">
|
|
951
|
+
<g class="fb-bubble" transform="translate(12 8)">
|
|
952
|
+
<rect x="0" y="0" width="44" height="22" rx="4" fill="#1A2D50" stroke="#8B6FC0" stroke-width="1"/>
|
|
953
|
+
<polygon points="8,22 12,22 10,28" fill="#1A2D50" stroke="#8B6FC0" stroke-width="1"/>
|
|
954
|
+
<rect x="4" y="5" width="30" height="2" fill="#8B6FC0" opacity="0.6" rx="1"/>
|
|
955
|
+
<rect x="4" y="10" width="36" height="2" fill="#8B6FC0" opacity="0.5" rx="1"/>
|
|
956
|
+
<rect x="4" y="15" width="24" height="2" fill="#8B6FC0" opacity="0.4" rx="1"/>
|
|
957
|
+
</g>
|
|
958
|
+
<path class="fb-loop" d="M60 8 Q72 20 60 40 Q44 52 30 40" stroke="#F59E0B" stroke-width="1.4" fill="none" marker-end="url(#arr-bell)"/>
|
|
959
|
+
<defs><marker id="arr-bell" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#F59E0B"/></marker></defs>
|
|
960
|
+
</g>
|
|
961
|
+
</svg>
|
|
962
|
+
</div>
|
|
963
|
+
<div class="jstep-meta">"louder!" → iterate</div>
|
|
964
|
+
</div>
|
|
196
965
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;
|
|
200
|
-
position: relative; z-index: 1;
|
|
201
|
-
}
|
|
202
|
-
.hero-brands .brand { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
|
|
203
|
-
.hero-brands .wash { color: var(--accent-blue); }
|
|
204
|
-
.hero-brands .times { color: var(--text-muted); font-weight: 300; font-size: 1.2rem; }
|
|
205
|
-
.hero-brands .cad { color: var(--accent-gold); }
|
|
206
|
-
|
|
207
|
-
/* Cycle symbol */
|
|
208
|
-
.cycle-symbol { width: 120px; height: 120px; margin-bottom: 1.5rem; position: relative; z-index: 1; animation: spinSlow 20s linear infinite; }
|
|
209
|
-
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
210
|
-
|
|
211
|
-
/* ============================================================
|
|
212
|
-
BRAND STORY SECTION
|
|
213
|
-
============================================================ */
|
|
214
|
-
.brand-story { text-align: center; }
|
|
215
|
-
.brand-story h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); max-width: 800px; margin: 0 auto 20px; }
|
|
216
|
-
.brand-story > .container > .subtitle { color: var(--text-secondary); max-width: 700px; margin: 0 auto 60px; font-size: 1.1rem; }
|
|
217
|
-
|
|
218
|
-
.story-cards {
|
|
219
|
-
display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 1000px; margin: 0 auto;
|
|
220
|
-
}
|
|
221
|
-
.story-card {
|
|
222
|
-
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px;
|
|
223
|
-
padding: 2.5rem; text-align: left; transition: all 0.3s; position: relative; overflow: hidden;
|
|
224
|
-
}
|
|
225
|
-
.story-card::before {
|
|
226
|
-
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
|
|
227
|
-
}
|
|
228
|
-
.story-card.wash::before { background: var(--accent-blue); }
|
|
229
|
-
.story-card.cad::before { background: var(--accent-gold); }
|
|
230
|
-
.story-card:hover { border-color: rgba(212,168,67,0.2); background: var(--bg-card-hover); }
|
|
231
|
-
.story-card .card-brand { font-size: 1.6rem; font-weight: 800; margin-bottom: 0.5rem; }
|
|
232
|
-
.story-card .card-role { font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1rem; }
|
|
233
|
-
.story-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; }
|
|
234
|
-
.story-card p strong { color: var(--text-primary); }
|
|
235
|
-
|
|
236
|
-
.story-connector {
|
|
237
|
-
text-align: center; padding: 2rem 0; font-size: 0.85rem; color: var(--accent-gold);
|
|
238
|
-
font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
|
|
239
|
-
}
|
|
966
|
+
</div>
|
|
967
|
+
</div>
|
|
240
968
|
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
.problem-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; }
|
|
272
|
-
.problem-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; }
|
|
273
|
-
|
|
274
|
-
.solution { text-align: center; }
|
|
275
|
-
.solution h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); max-width: 800px; margin: 0 auto 60px; }
|
|
276
|
-
.feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
|
|
277
|
-
.feature-card {
|
|
278
|
-
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px;
|
|
279
|
-
padding: 32px; text-align: left; transition: all 0.3s;
|
|
280
|
-
}
|
|
281
|
-
.feature-card:hover { border-color: rgba(212,168,67,0.15); background: var(--bg-card-hover); transform: translateY(-2px); }
|
|
282
|
-
.feature-icon {
|
|
283
|
-
width: 48px; height: 48px; border-radius: 12px; display: flex;
|
|
284
|
-
align-items: center; justify-content: center; font-size: 22px; margin-bottom: 20px;
|
|
285
|
-
}
|
|
286
|
-
.feature-icon.gold { background: rgba(212,168,67,0.12); }
|
|
287
|
-
.feature-icon.blue { background: rgba(46,134,222,0.12); }
|
|
288
|
-
.feature-icon.teal { background: rgba(58,175,169,0.12); }
|
|
289
|
-
.feature-icon.purple { background: rgba(139,111,192,0.12); }
|
|
290
|
-
.feature-icon.warn { background: rgba(232,150,58,0.12); }
|
|
291
|
-
.feature-icon.coral { background: rgba(224,85,85,0.12); }
|
|
292
|
-
.feature-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 12px; }
|
|
293
|
-
.feature-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.7; }
|
|
294
|
-
|
|
295
|
-
/* ============================================================
|
|
296
|
-
EVERYONE IS A DESIGNER (PERSONAS)
|
|
297
|
-
============================================================ */
|
|
298
|
-
.personas { text-align: center; }
|
|
299
|
-
.personas h2 { font-size: clamp(2rem, 4.5vw, 3rem); max-width: 800px; margin: 0 auto 20px; }
|
|
300
|
-
.personas > .container > .subtitle { color: var(--text-secondary); max-width: 600px; margin: 0 auto 60px; font-size: 1.05rem; }
|
|
301
|
-
.persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
|
|
302
|
-
.persona-card {
|
|
303
|
-
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 14px;
|
|
304
|
-
padding: 2rem; text-align: left; transition: all 0.3s;
|
|
305
|
-
}
|
|
306
|
-
.persona-card:hover { border-color: rgba(212,168,67,0.2); background: var(--bg-card-hover); }
|
|
307
|
-
.persona-card .persona-icon { font-size: 2rem; margin-bottom: 0.8rem; }
|
|
308
|
-
.persona-card h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
|
|
309
|
-
.persona-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }
|
|
310
|
-
|
|
311
|
-
/* ============================================================
|
|
312
|
-
OS OF THINGS PIPELINE
|
|
313
|
-
============================================================ */
|
|
314
|
-
.os-pipeline { text-align: center; position: relative; overflow: hidden; }
|
|
315
|
-
.os-pipeline::before {
|
|
316
|
-
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
|
317
|
-
background: radial-gradient(circle at 30% 50%, rgba(212,168,67,0.06) 0%, transparent 50%),
|
|
318
|
-
radial-gradient(circle at 70% 50%, rgba(46,134,222,0.06) 0%, transparent 50%);
|
|
319
|
-
}
|
|
320
|
-
.os-pipeline h2 { font-size: clamp(2rem, 4.5vw, 3rem); max-width: 800px; margin: 0 auto 16px; position: relative; z-index: 1; }
|
|
321
|
-
.os-pipeline > .container > .subtitle { color: var(--text-secondary); max-width: 700px; margin: 0 auto 50px; font-size: 1.05rem; position: relative; z-index: 1; }
|
|
969
|
+
<!-- ═══════════════════════════════════════
|
|
970
|
+
JOURNEY 2 — Precision flange (B2B)
|
|
971
|
+
═══════════════════════════════════════ -->
|
|
972
|
+
<div class="journey" data-journey="flange">
|
|
973
|
+
<div class="journey-head">
|
|
974
|
+
<div class="jicon">⚙️</div>
|
|
975
|
+
<div class="jmeta">
|
|
976
|
+
<div class="jname">Precision flange</div>
|
|
977
|
+
<div class="jtag">Industrial B2B · 3 days · 50-unit PO · €2 400 revenue</div>
|
|
978
|
+
</div>
|
|
979
|
+
<div class="jtimer"><span class="jtimer-dot"></span><span>STEP <span class="jstep-n">1</span>/6</span></div>
|
|
980
|
+
</div>
|
|
981
|
+
<div class="journey-track">
|
|
982
|
+
|
|
983
|
+
<div class="jstep" data-step="0">
|
|
984
|
+
<div class="jstep-name">Ideate</div>
|
|
985
|
+
<div class="jstep-vis">
|
|
986
|
+
<svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
|
|
987
|
+
<g class="vis-idea">
|
|
988
|
+
<g class="bulb" style="color: #3AAFA9">
|
|
989
|
+
<path d="M40 8 C28 8 22 17 24 28 C25 33 28 36 30 40 L50 40 C52 36 55 33 56 28 C58 17 52 8 40 8 Z" fill="currentColor" fill-opacity="0.2" stroke="currentColor" stroke-width="1.4"/>
|
|
990
|
+
<rect x="32" y="40" width="16" height="4" fill="currentColor"/>
|
|
991
|
+
<rect x="34" y="45" width="12" height="2" fill="currentColor" opacity="0.7"/>
|
|
992
|
+
</g>
|
|
993
|
+
</g>
|
|
994
|
+
</svg>
|
|
995
|
+
</div>
|
|
996
|
+
<div class="jstep-meta">"flange Ø80 6 bolts PCD 60"</div>
|
|
997
|
+
<div class="jstep-arrow">›</div>
|
|
998
|
+
</div>
|
|
322
999
|
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
/* ============================================================
|
|
345
|
-
MACHINES CREATING MACHINES
|
|
346
|
-
============================================================ */
|
|
347
|
-
.machines-section { text-align: center; position: relative; overflow: hidden; }
|
|
348
|
-
.machines-section::before {
|
|
349
|
-
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
|
350
|
-
background: radial-gradient(circle at 50% 50%, rgba(139,111,192,0.06) 0%, transparent 60%);
|
|
351
|
-
}
|
|
352
|
-
.machines-section h2 { font-size: clamp(2rem, 4.5vw, 3rem); position: relative; z-index: 1; margin-bottom: 1.5rem; }
|
|
353
|
-
.machines-section p { position: relative; z-index: 1; }
|
|
354
|
-
.machines-flow {
|
|
355
|
-
display: flex; align-items: center; justify-content: center; gap: 0.8rem;
|
|
356
|
-
flex-wrap: wrap; position: relative; z-index: 1; max-width: 900px; margin: 2.5rem auto;
|
|
357
|
-
}
|
|
358
|
-
.machine-step {
|
|
359
|
-
text-align: center; padding: 1rem 1.5rem; background: var(--bg-card);
|
|
360
|
-
border-radius: 12px; border: 1px solid var(--border-card);
|
|
361
|
-
}
|
|
362
|
-
.machine-step .m-label { font-size: 1.3rem; font-weight: 800; }
|
|
363
|
-
.machine-step .m-desc { font-size: 0.8rem; color: var(--text-muted); }
|
|
364
|
-
|
|
365
|
-
/* ============================================================
|
|
366
|
-
CAPABILITIES GRID
|
|
367
|
-
============================================================ */
|
|
368
|
-
.capabilities { text-align: center; }
|
|
369
|
-
.capabilities h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); max-width: 800px; margin: 0 auto 20px; }
|
|
370
|
-
.capabilities > .container > p { color: var(--text-secondary); max-width: 600px; margin: 0 auto 60px; font-size: 1.1rem; }
|
|
371
|
-
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
|
|
372
|
-
.cap-item {
|
|
373
|
-
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 12px;
|
|
374
|
-
padding: 20px 16px; text-align: center; transition: all 0.2s;
|
|
375
|
-
}
|
|
376
|
-
.cap-item:hover { border-color: rgba(212,168,67,0.2); background: var(--bg-card-hover); }
|
|
377
|
-
.cap-item .cap-icon { font-size: 24px; margin-bottom: 10px; }
|
|
378
|
-
.cap-item h4 { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
|
|
379
|
-
.cap-item p { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
|
|
380
|
-
|
|
381
|
-
/* ============================================================
|
|
382
|
-
PRICING SECTION
|
|
383
|
-
============================================================ */
|
|
384
|
-
.pricing { text-align: center; }
|
|
385
|
-
.pricing h2 { font-size: clamp(2rem, 4.5vw, 3rem); max-width: 800px; margin: 0 auto 20px; }
|
|
386
|
-
.pricing > .container > .subtitle { color: var(--text-secondary); max-width: 600px; margin: 0 auto 60px; font-size: 1.05rem; }
|
|
387
|
-
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 960px; margin: 0 auto; }
|
|
388
|
-
.pricing-card {
|
|
389
|
-
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px;
|
|
390
|
-
padding: 2.5rem 2rem; text-align: center; transition: all 0.3s; position: relative; overflow: hidden;
|
|
391
|
-
}
|
|
392
|
-
.pricing-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
|
|
393
|
-
.pricing-card.starter::before { background: var(--text-muted); }
|
|
394
|
-
.pricing-card.pro::before { background: var(--accent-blue); }
|
|
395
|
-
.pricing-card.enterprise::before { background: var(--accent-gold); }
|
|
396
|
-
.pricing-card.pro { border-color: rgba(46,134,222,0.3); }
|
|
397
|
-
.pricing-card:hover { transform: translateY(-3px); }
|
|
398
|
-
.pricing-card .tier-name { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; }
|
|
399
|
-
.pricing-card .tier-price { font-size: 2.2rem; font-weight: 900; margin-bottom: 0.3rem; }
|
|
400
|
-
.pricing-card .tier-period { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem; }
|
|
401
|
-
.pricing-card .tier-features { list-style: none; text-align: left; }
|
|
402
|
-
.pricing-card .tier-features li {
|
|
403
|
-
padding: 0.5rem 0; font-size: 0.9rem; color: var(--text-secondary);
|
|
404
|
-
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
405
|
-
}
|
|
406
|
-
.pricing-card .tier-features li::before { content: ""; margin-right: 0.5rem; }
|
|
407
|
-
.launch-badge {
|
|
408
|
-
display: inline-block; padding: 0.4rem 1rem; background: rgba(232,150,58,0.15);
|
|
409
|
-
border: 1px solid rgba(232,150,58,0.3); border-radius: 20px;
|
|
410
|
-
font-size: 0.8rem; color: var(--accent-warn); font-weight: 600; margin-top: 1rem;
|
|
411
|
-
}
|
|
1000
|
+
<div class="jstep" data-step="1">
|
|
1001
|
+
<div class="jstep-name">Design</div>
|
|
1002
|
+
<div class="jstep-vis">
|
|
1003
|
+
<svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
|
|
1004
|
+
<g class="vis-design">
|
|
1005
|
+
<circle class="d-fill" cx="40" cy="28" r="18" fill="#3AAFA9"/>
|
|
1006
|
+
<circle class="d-path" cx="40" cy="28" r="18" fill="none" stroke="#3AAFA9" stroke-width="1.4"/>
|
|
1007
|
+
<circle class="d-path" cx="40" cy="28" r="5" fill="none" stroke="#3AAFA9" stroke-width="1"/>
|
|
1008
|
+
<circle class="d-path" cx="40" cy="16" r="2" fill="#3AAFA9"/>
|
|
1009
|
+
<circle class="d-path" cx="50" cy="22" r="2" fill="#3AAFA9"/>
|
|
1010
|
+
<circle class="d-path" cx="50" cy="34" r="2" fill="#3AAFA9"/>
|
|
1011
|
+
<circle class="d-path" cx="40" cy="40" r="2" fill="#3AAFA9"/>
|
|
1012
|
+
<circle class="d-path" cx="30" cy="34" r="2" fill="#3AAFA9"/>
|
|
1013
|
+
<circle class="d-path" cx="30" cy="22" r="2" fill="#3AAFA9"/>
|
|
1014
|
+
</g>
|
|
1015
|
+
</svg>
|
|
1016
|
+
</div>
|
|
1017
|
+
<div class="jstep-meta">Ø 80 · 6 × M6 · PCD 60</div>
|
|
1018
|
+
<div class="jstep-arrow">›</div>
|
|
1019
|
+
</div>
|
|
412
1020
|
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
background: radial-gradient(ellipse, rgba(212,168,67,0.1) 0%, transparent 70%);
|
|
433
|
-
pointer-events: none;
|
|
434
|
-
}
|
|
435
|
-
.final-cta h2 { font-size: clamp(2.5rem, 5vw, 4rem); max-width: 800px; margin: 0 auto 24px; }
|
|
436
|
-
.final-cta p { color: var(--text-secondary); font-size: 1.1rem; max-width: 500px; margin: 0 auto 40px; }
|
|
437
|
-
|
|
438
|
-
/* ============================================================
|
|
439
|
-
FOOTER
|
|
440
|
-
============================================================ */
|
|
441
|
-
footer { padding: 32px 0; border-top: 1px solid var(--border-card); text-align: center; }
|
|
442
|
-
footer .container { display: flex; justify-content: space-between; align-items: center; }
|
|
443
|
-
footer .nav-logo { font-size: 1rem; }
|
|
444
|
-
footer p { color: var(--text-muted); font-size: 0.8rem; }
|
|
445
|
-
footer .footer-links { display: flex; gap: 24px; list-style: none; }
|
|
446
|
-
footer .footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; transition: color 0.2s; }
|
|
447
|
-
footer .footer-links a:hover { color: var(--text-secondary); }
|
|
448
|
-
|
|
449
|
-
/* Mockup */
|
|
450
|
-
.hero-visual { margin-top: 60px; width: 100%; max-width: 900px; aspect-ratio: 16/9; background: radial-gradient(ellipse at center bottom, rgba(212,168,67,0.08) 0%, transparent 70%); border-radius: 16px; border: 1px solid var(--border-card); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; z-index: 1; }
|
|
451
|
-
.app-mockup { width: 100%; height: 100%; background: var(--mockup-bg); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
|
|
452
|
-
.mockup-toolbar { height: 36px; background: var(--mockup-toolbar); border-bottom: 1px solid var(--mockup-toolbar-border); display: flex; align-items: center; padding: 0 12px; gap: 6px; }
|
|
453
|
-
.mockup-dot { width: 8px; height: 8px; border-radius: 50%; }
|
|
454
|
-
.mockup-dot.red { background: #ff5f57; } .mockup-dot.yellow { background: #febc2e; } .mockup-dot.green { background: #28c840; }
|
|
455
|
-
.mockup-toolbar-items { display: flex; gap: 8px; margin-left: 16px; }
|
|
456
|
-
.mockup-toolbar-item { width: 40px; height: 6px; background: var(--mockup-tree); border-radius: 3px; }
|
|
457
|
-
.mockup-body { flex: 1; display: flex; }
|
|
458
|
-
.mockup-sidebar { width: 160px; background: var(--mockup-sidebar); border-right: 1px solid var(--mockup-sidebar-border); padding: 12px 8px; }
|
|
459
|
-
.mockup-tree-item { height: 5px; background: var(--mockup-tree); border-radius: 3px; margin-bottom: 6px; }
|
|
460
|
-
.mockup-tree-item.active { background: var(--accent-gold); opacity: 0.6; }
|
|
461
|
-
.mockup-tree-item.indent { margin-left: 12px; width: calc(100% - 12px); }
|
|
462
|
-
.mockup-viewport { flex: 1; background: radial-gradient(ellipse at center, var(--mockup-viewport-center) 0%, var(--mockup-viewport-edge) 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
|
|
463
|
-
.mockup-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 30px 30px; transform: perspective(600px) rotateX(45deg); transform-origin: center 70%; }
|
|
464
|
-
.mockup-3d-shape { position: relative; z-index: 1; }
|
|
465
|
-
.cube-container { width: 120px; height: 120px; perspective: 400px; }
|
|
466
|
-
.cube { width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-25deg) rotateY(40deg); animation: cubeRotate 20s linear infinite; }
|
|
467
|
-
@keyframes cubeRotate { 0% { transform: rotateX(-25deg) rotateY(40deg); } 100% { transform: rotateX(-25deg) rotateY(400deg); } }
|
|
468
|
-
.cube-face { position: absolute; width: 100px; height: 100px; border: 1.5px solid var(--cube-border); background: var(--cube-bg); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-muted); }
|
|
469
|
-
.cube-face.front { transform: translateZ(50px) translateX(10px) translateY(10px); }
|
|
470
|
-
.cube-face.back { transform: rotateY(180deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
471
|
-
.cube-face.right { transform: rotateY(90deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
472
|
-
.cube-face.left { transform: rotateY(-90deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
473
|
-
.cube-face.top { transform: rotateX(90deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
474
|
-
.cube-face.bottom { transform: rotateX(-90deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
475
|
-
.mockup-props { width: 180px; background: var(--mockup-sidebar); border-left: 1px solid var(--mockup-sidebar-border); padding: 12px 8px; }
|
|
476
|
-
.mockup-prop-label { height: 4px; width: 40px; background: var(--mockup-tree); border-radius: 2px; margin-bottom: 8px; }
|
|
477
|
-
.mockup-prop-value { height: 4px; width: 70px; background: var(--mockup-tree); border-radius: 2px; margin-bottom: 12px; }
|
|
478
|
-
|
|
479
|
-
/* ============================================================
|
|
480
|
-
RESPONSIVE
|
|
481
|
-
============================================================ */
|
|
482
|
-
@media (max-width: 900px) {
|
|
483
|
-
.story-cards { grid-template-columns: 1fr; }
|
|
484
|
-
.problem-cards { grid-template-columns: 1fr; }
|
|
485
|
-
.feature-cards { grid-template-columns: 1fr; }
|
|
486
|
-
.dna-grid { grid-template-columns: 1fr; }
|
|
487
|
-
.persona-grid { grid-template-columns: 1fr; }
|
|
488
|
-
.pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
|
|
489
|
-
.cap-grid { grid-template-columns: repeat(2, 1fr); }
|
|
490
|
-
.mockup-props, .mockup-sidebar { display: none; }
|
|
491
|
-
nav .nav-links { display: none; }
|
|
492
|
-
.pipeline-flow { gap: 0.4rem; }
|
|
493
|
-
.pipeline-step { min-width: 100px; padding: 0.8rem 1rem; }
|
|
494
|
-
.pipeline-arrow { display: none; }
|
|
495
|
-
}
|
|
496
|
-
@media (max-width: 600px) {
|
|
497
|
-
section { padding: 80px 0; }
|
|
498
|
-
.cap-grid { grid-template-columns: 1fr 1fr; }
|
|
499
|
-
.hero-ctas { flex-direction: column; align-items: center; }
|
|
500
|
-
footer .container { flex-direction: column; gap: 16px; }
|
|
501
|
-
footer .footer-links { gap: 16px; }
|
|
502
|
-
.hero-brands .brand { font-size: 1.1rem; }
|
|
503
|
-
}
|
|
1021
|
+
<div class="jstep" data-step="2">
|
|
1022
|
+
<div class="jstep-name">Market</div>
|
|
1023
|
+
<div class="jstep-vis">
|
|
1024
|
+
<svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
|
|
1025
|
+
<g class="vis-market">
|
|
1026
|
+
<g class="m-card">
|
|
1027
|
+
<rect x="14" y="6" width="52" height="44" rx="4" fill="#1A2D50" stroke="#3AAFA9" stroke-width="1"/>
|
|
1028
|
+
<circle cx="40" cy="22" r="9" fill="#3AAFA9" fill-opacity="0.3" stroke="#3AAFA9" stroke-width="0.8"/>
|
|
1029
|
+
<rect x="18" y="36" width="28" height="2" fill="#3AAFA9" opacity="0.5"/>
|
|
1030
|
+
<rect x="18" y="40" width="20" height="2" fill="#3AAFA9" opacity="0.4"/>
|
|
1031
|
+
<rect x="48" y="36" width="14" height="8" rx="1" fill="#3AAFA9" opacity="0.3"/>
|
|
1032
|
+
<text x="55" y="42" font-size="5" fill="#3AAFA9" text-anchor="middle" font-weight="700">€48</text>
|
|
1033
|
+
</g>
|
|
1034
|
+
</g>
|
|
1035
|
+
</svg>
|
|
1036
|
+
</div>
|
|
1037
|
+
<div class="jstep-meta">Spec sheet · quote form</div>
|
|
1038
|
+
<div class="jstep-arrow">›</div>
|
|
1039
|
+
</div>
|
|
504
1040
|
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
<
|
|
1041
|
+
<div class="jstep" data-step="3">
|
|
1042
|
+
<div class="jstep-name">Sell</div>
|
|
1043
|
+
<div class="jstep-vis">
|
|
1044
|
+
<svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
|
|
1045
|
+
<g class="vis-sell">
|
|
1046
|
+
<rect x="20" y="8" width="40" height="32" rx="2" fill="#122240" stroke="#3AAFA9" stroke-width="1"/>
|
|
1047
|
+
<rect x="24" y="12" width="32" height="4" fill="#3AAFA9" opacity="0.3"/>
|
|
1048
|
+
<text x="40" y="28" text-anchor="middle" class="s-count">50</text>
|
|
1049
|
+
<text x="40" y="38" text-anchor="middle" fill="#8B9AB5" font-size="5" font-family="JetBrains Mono">units PO</text>
|
|
1050
|
+
<g class="s-cart" transform="translate(6 14)">
|
|
1051
|
+
<rect x="0" y="0" width="12" height="2" fill="#3AAFA9"/>
|
|
1052
|
+
<rect x="0" y="5" width="10" height="2" fill="#3AAFA9"/>
|
|
1053
|
+
<rect x="0" y="10" width="14" height="2" fill="#3AAFA9"/>
|
|
1054
|
+
</g>
|
|
1055
|
+
</g>
|
|
1056
|
+
</svg>
|
|
1057
|
+
</div>
|
|
1058
|
+
<div class="jstep-meta">€2 400 · 50 units</div>
|
|
1059
|
+
<div class="jstep-arrow">›</div>
|
|
1060
|
+
</div>
|
|
516
1061
|
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
<!-- ============================================================
|
|
537
|
-
HERO — cycleWASH × cycleCAD
|
|
538
|
-
============================================================ -->
|
|
539
|
-
<section class="hero" id="hero">
|
|
540
|
-
<div class="cycle-symbol fade-up d1">
|
|
541
|
-
<svg viewBox="0 0 200 200">
|
|
542
|
-
<defs>
|
|
543
|
-
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
544
|
-
<stop offset="0%" style="stop-color:#2E86DE;stop-opacity:1" />
|
|
545
|
-
<stop offset="50%" style="stop-color:#D4A843;stop-opacity:1" />
|
|
546
|
-
<stop offset="100%" style="stop-color:#3AAFA9;stop-opacity:1" />
|
|
547
|
-
</linearGradient>
|
|
548
|
-
</defs>
|
|
549
|
-
<path d="M 100 20 A 80 80 0 0 1 169 60" fill="none" stroke="url(#grad1)" stroke-width="4" stroke-linecap="round"/>
|
|
550
|
-
<polygon points="172,55 165,68 158,55" fill="#D4A843"/>
|
|
551
|
-
<path d="M 169 140 A 80 80 0 0 1 31 140" fill="none" stroke="url(#grad1)" stroke-width="4" stroke-linecap="round"/>
|
|
552
|
-
<polygon points="28,136 35,148 22,148" fill="#3AAFA9"/>
|
|
553
|
-
<path d="M 31 60 A 80 80 0 0 1 100 20" fill="none" stroke="url(#grad1)" stroke-width="4" stroke-linecap="round"/>
|
|
554
|
-
<polygon points="96,17 103,28 90,28" fill="#2E86DE"/>
|
|
555
|
-
<text x="100" y="95" text-anchor="middle" fill="#F0F0E8" font-family="Inter, sans-serif" font-weight="800" font-size="22">cycle</text>
|
|
556
|
-
<text x="100" y="118" text-anchor="middle" fill="#8B9AB5" font-family="Inter, sans-serif" font-weight="400" font-size="11" letter-spacing="3">ENGINEERING</text>
|
|
557
|
-
</svg>
|
|
558
|
-
</div>
|
|
1062
|
+
<div class="jstep" data-step="4">
|
|
1063
|
+
<div class="jstep-name">Manufacture</div>
|
|
1064
|
+
<div class="jstep-vis">
|
|
1065
|
+
<svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
|
|
1066
|
+
<g class="vis-mfg">
|
|
1067
|
+
<rect x="16" y="26" width="48" height="16" rx="1" fill="#122240" stroke="#1E3A5F" stroke-width="0.8"/>
|
|
1068
|
+
<path class="m-path" d="M22 32 L58 32 L58 36 L22 36 L22 40 L58 40" stroke="#3AAFA9" stroke-width="1.2" fill="none"/>
|
|
1069
|
+
<g class="m-spindle">
|
|
1070
|
+
<rect x="-4" y="-14" width="8" height="16" fill="#5A6B85" stroke="#8B9AB5" stroke-width="0.4" rx="1"/>
|
|
1071
|
+
<polygon points="-2,2 2,2 0,6" fill="#F59E0B"/>
|
|
1072
|
+
</g>
|
|
1073
|
+
<circle class="m-chip" cx="0" cy="0" r="1.2" fill="#F59E0B"/>
|
|
1074
|
+
</g>
|
|
1075
|
+
</svg>
|
|
1076
|
+
</div>
|
|
1077
|
+
<div class="jstep-meta">Batch run · 50 parts</div>
|
|
1078
|
+
<div class="jstep-arrow">›</div>
|
|
1079
|
+
</div>
|
|
559
1080
|
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
1081
|
+
<div class="jstep" data-step="5">
|
|
1082
|
+
<div class="jstep-name">Feedback</div>
|
|
1083
|
+
<div class="jstep-vis">
|
|
1084
|
+
<svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
|
|
1085
|
+
<g class="vis-feedback">
|
|
1086
|
+
<g class="fb-bubble" transform="translate(12 6)">
|
|
1087
|
+
<rect x="0" y="0" width="44" height="20" rx="4" fill="#1A2D50" stroke="#3AAFA9" stroke-width="1"/>
|
|
1088
|
+
<rect x="4" y="5" width="32" height="2" fill="#3AAFA9" opacity="0.6" rx="1"/>
|
|
1089
|
+
<rect x="4" y="10" width="26" height="2" fill="#3AAFA9" opacity="0.5" rx="1"/>
|
|
1090
|
+
<polygon points="8,20 12,20 10,26" fill="#1A2D50" stroke="#3AAFA9" stroke-width="1"/>
|
|
1091
|
+
</g>
|
|
1092
|
+
<path class="fb-loop" d="M60 8 Q72 20 60 40 Q44 52 30 40" stroke="#F59E0B" stroke-width="1.4" fill="none" marker-end="url(#arr-flange)"/>
|
|
1093
|
+
<defs><marker id="arr-flange" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#F59E0B"/></marker></defs>
|
|
1094
|
+
</g>
|
|
1095
|
+
</svg>
|
|
1096
|
+
</div>
|
|
1097
|
+
<div class="jstep-meta">"tolerance → ±0.05"</div>
|
|
1098
|
+
</div>
|
|
565
1099
|
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
</h1>
|
|
1100
|
+
</div>
|
|
1101
|
+
</div>
|
|
569
1102
|
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
1103
|
+
<!-- ═══════════════════════════════════════
|
|
1104
|
+
JOURNEY 3 — Bottle opener ring (branded merch)
|
|
1105
|
+
═══════════════════════════════════════ -->
|
|
1106
|
+
<div class="journey" data-journey="opener">
|
|
1107
|
+
<div class="journey-head">
|
|
1108
|
+
<div class="jicon">🍺</div>
|
|
1109
|
+
<div class="jmeta">
|
|
1110
|
+
<div class="jname">Branded bottle-opener ring</div>
|
|
1111
|
+
<div class="jtag">Promo · 2 days · 100-unit brewery order · €1 900 revenue</div>
|
|
1112
|
+
</div>
|
|
1113
|
+
<div class="jtimer"><span class="jtimer-dot"></span><span>STEP <span class="jstep-n">1</span>/6</span></div>
|
|
1114
|
+
</div>
|
|
1115
|
+
<div class="journey-track">
|
|
1116
|
+
|
|
1117
|
+
<div class="jstep" data-step="0">
|
|
1118
|
+
<div class="jstep-name">Ideate</div>
|
|
1119
|
+
<div class="jstep-vis">
|
|
1120
|
+
<svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
|
|
1121
|
+
<g class="vis-idea">
|
|
1122
|
+
<g class="bulb" style="color: #10B981">
|
|
1123
|
+
<path d="M40 8 C28 8 22 17 24 28 C25 33 28 36 30 40 L50 40 C52 36 55 33 56 28 C58 17 52 8 40 8 Z" fill="currentColor" fill-opacity="0.2" stroke="currentColor" stroke-width="1.4"/>
|
|
1124
|
+
<rect x="32" y="40" width="16" height="4" fill="currentColor"/>
|
|
1125
|
+
<rect x="34" y="45" width="12" height="2" fill="currentColor" opacity="0.7"/>
|
|
1126
|
+
</g>
|
|
1127
|
+
</g>
|
|
1128
|
+
</svg>
|
|
1129
|
+
</div>
|
|
1130
|
+
<div class="jstep-meta">"brewery bottle opener"</div>
|
|
1131
|
+
<div class="jstep-arrow">›</div>
|
|
1132
|
+
</div>
|
|
575
1133
|
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
1134
|
+
<div class="jstep" data-step="1">
|
|
1135
|
+
<div class="jstep-name">Design</div>
|
|
1136
|
+
<div class="jstep-vis">
|
|
1137
|
+
<svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
|
|
1138
|
+
<g class="vis-design">
|
|
1139
|
+
<circle class="d-fill" cx="40" cy="28" r="16" fill="#10B981"/>
|
|
1140
|
+
<circle class="d-path" cx="40" cy="28" r="16" fill="none" stroke="#10B981" stroke-width="1.4"/>
|
|
1141
|
+
<circle class="d-path" cx="40" cy="28" r="8" fill="none" stroke="#10B981" stroke-width="1.2"/>
|
|
1142
|
+
<path class="d-path" d="M30 28 C30 24 34 22 40 22 C46 22 50 24 50 28" stroke="#10B981" stroke-width="1" fill="none" opacity="0.6"/>
|
|
1143
|
+
</g>
|
|
1144
|
+
</svg>
|
|
1145
|
+
</div>
|
|
1146
|
+
<div class="jstep-meta">Al 6061 · Ø 50 · 6 mm</div>
|
|
1147
|
+
<div class="jstep-arrow">›</div>
|
|
1148
|
+
</div>
|
|
580
1149
|
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
1150
|
+
<div class="jstep" data-step="2">
|
|
1151
|
+
<div class="jstep-name">Market</div>
|
|
1152
|
+
<div class="jstep-vis">
|
|
1153
|
+
<svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
|
|
1154
|
+
<g class="vis-market">
|
|
1155
|
+
<g class="m-card">
|
|
1156
|
+
<rect x="16" y="8" width="48" height="30" rx="3" fill="#1A2D50" stroke="#10B981" stroke-width="1"/>
|
|
1157
|
+
<circle cx="40" cy="22" r="7" fill="#10B981" fill-opacity="0.35" stroke="#10B981" stroke-width="0.8"/>
|
|
1158
|
+
<rect x="20" y="32" width="22" height="2" fill="#10B981" opacity="0.5"/>
|
|
1159
|
+
<rect x="48" y="30" width="14" height="6" rx="1" fill="#10B981"/>
|
|
1160
|
+
<text x="55" y="34.5" font-size="4.5" fill="#0A1628" text-anchor="middle" font-weight="700">BUY</text>
|
|
1161
|
+
</g>
|
|
1162
|
+
</g>
|
|
1163
|
+
</svg>
|
|
1164
|
+
</div>
|
|
1165
|
+
<div class="jstep-meta">Landing page · Instagram</div>
|
|
1166
|
+
<div class="jstep-arrow">›</div>
|
|
595
1167
|
</div>
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
<div
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
1168
|
+
|
|
1169
|
+
<div class="jstep" data-step="3">
|
|
1170
|
+
<div class="jstep-name">Sell</div>
|
|
1171
|
+
<div class="jstep-vis">
|
|
1172
|
+
<svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
|
|
1173
|
+
<g class="vis-sell">
|
|
1174
|
+
<g class="s-cart" transform="translate(14 16)">
|
|
1175
|
+
<path d="M0 0 L6 0 L10 18 L34 18 L38 6 L8 6" fill="none" stroke="#10B981" stroke-width="1.3" stroke-linejoin="round" stroke-linecap="round"/>
|
|
1176
|
+
<circle cx="14" cy="24" r="2.5" fill="#10B981"/>
|
|
1177
|
+
<circle cx="30" cy="24" r="2.5" fill="#10B981"/>
|
|
1178
|
+
</g>
|
|
1179
|
+
<text class="s-count" x="62" y="22" text-anchor="end">100</text>
|
|
1180
|
+
<text x="62" y="34" text-anchor="end" fill="#8B9AB5" font-size="6" font-family="JetBrains Mono">units sold</text>
|
|
1181
|
+
</g>
|
|
1182
|
+
</svg>
|
|
1183
|
+
</div>
|
|
1184
|
+
<div class="jstep-meta">Brewery wholesale order</div>
|
|
1185
|
+
<div class="jstep-arrow">›</div>
|
|
609
1186
|
</div>
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
<div class="
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
<
|
|
617
|
-
<
|
|
618
|
-
<
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
1187
|
+
|
|
1188
|
+
<div class="jstep" data-step="4">
|
|
1189
|
+
<div class="jstep-name">Manufacture</div>
|
|
1190
|
+
<div class="jstep-vis">
|
|
1191
|
+
<svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
|
|
1192
|
+
<g class="vis-mfg">
|
|
1193
|
+
<rect x="16" y="26" width="48" height="16" rx="1" fill="#122240" stroke="#1E3A5F" stroke-width="0.8"/>
|
|
1194
|
+
<path class="m-path" d="M22 32 L58 32 L58 36 L22 36 L22 40 L58 40" stroke="#10B981" stroke-width="1.2" fill="none"/>
|
|
1195
|
+
<g class="m-spindle">
|
|
1196
|
+
<rect x="-4" y="-14" width="8" height="16" fill="#5A6B85" stroke="#8B9AB5" stroke-width="0.4" rx="1"/>
|
|
1197
|
+
<polygon points="-2,2 2,2 0,6" fill="#F59E0B"/>
|
|
1198
|
+
</g>
|
|
1199
|
+
<circle class="m-chip" cx="0" cy="0" r="1.2" fill="#F59E0B"/>
|
|
1200
|
+
</g>
|
|
1201
|
+
</svg>
|
|
623
1202
|
</div>
|
|
1203
|
+
<div class="jstep-meta">V2-50 · bottle-opener.ngc</div>
|
|
1204
|
+
<div class="jstep-arrow">›</div>
|
|
624
1205
|
</div>
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
<div class="
|
|
628
|
-
<div class="
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
1206
|
+
|
|
1207
|
+
<div class="jstep" data-step="5">
|
|
1208
|
+
<div class="jstep-name">Feedback</div>
|
|
1209
|
+
<div class="jstep-vis">
|
|
1210
|
+
<svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
|
|
1211
|
+
<g class="vis-feedback">
|
|
1212
|
+
<g class="fb-bubble" transform="translate(10 10)">
|
|
1213
|
+
<rect x="0" y="0" width="44" height="18" rx="4" fill="#1A2D50" stroke="#10B981" stroke-width="1"/>
|
|
1214
|
+
<text x="22" y="12" text-anchor="middle" fill="#10B981" font-size="7" font-weight="700">★★★★★</text>
|
|
1215
|
+
</g>
|
|
1216
|
+
<path class="fb-loop" d="M60 10 Q72 22 60 40 Q44 52 30 40" stroke="#F59E0B" stroke-width="1.4" fill="none" marker-end="url(#arr-opener)"/>
|
|
1217
|
+
<defs><marker id="arr-opener" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto"><path d="M0 0 L10 5 L0 10 z" fill="#F59E0B"/></marker></defs>
|
|
1218
|
+
</g>
|
|
1219
|
+
</svg>
|
|
1220
|
+
</div>
|
|
1221
|
+
<div class="jstep-meta">Reorder · 200 units Q3</div>
|
|
636
1222
|
</div>
|
|
1223
|
+
|
|
637
1224
|
</div>
|
|
638
1225
|
</div>
|
|
1226
|
+
|
|
639
1227
|
</div>
|
|
640
|
-
</
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
<
|
|
646
|
-
<div class="
|
|
647
|
-
<div class="
|
|
648
|
-
<h2
|
|
649
|
-
<p
|
|
650
|
-
|
|
651
|
-
<div class="
|
|
652
|
-
<
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
<p>cycleWASH builds <strong>industrial bicycle washing machines</strong> — real hardware that keeps bikes in circulation longer. Complex machines with hundreds of precision-engineered parts across multiple sub-assemblies, designed in Autodesk Inventor and built in Germany.</p>
|
|
656
|
-
<p style="margin-top:1rem;">Every part is designed for <strong>disassembly, repair, and reuse</strong>. That's circular engineering — designing products that fight the throwaway economy from the first sketch.</p>
|
|
657
|
-
</div>
|
|
658
|
-
<div class="story-card cad reveal">
|
|
659
|
-
<div class="card-brand" style="color:var(--accent-gold);">cycleCAD</div>
|
|
660
|
-
<div class="card-role">Democratizing Design</div>
|
|
661
|
-
<p>Designing complex machines meant fighting <strong>$4,000/year CAD licenses</strong>, proprietary file formats, and tools that lock you into one vendor's ecosystem. We built cycleCAD to solve our own problem — and to power the <strong>circular economy</strong>.</p>
|
|
662
|
-
<p style="margin-top:1rem;"><strong>Browser-based, zero-install, AI-agent-ready.</strong> Built so AI agents can design autonomously, unskilled workers can build with confidence, and anyone with a browser can participate in the circular economy.</p>
|
|
663
|
-
</div>
|
|
1228
|
+
</div>
|
|
1229
|
+
</section>
|
|
1230
|
+
|
|
1231
|
+
<!-- ─── 01 IDEATE ─── -->
|
|
1232
|
+
<section class="stage" id="ideate" data-animate>
|
|
1233
|
+
<div class="wrap stage-layout">
|
|
1234
|
+
<div class="stage-body">
|
|
1235
|
+
<div class="label"><span class="n">01</span>Ideate</div>
|
|
1236
|
+
<h2>Turn words into <em>geometry</em>.</h2>
|
|
1237
|
+
<p>Start with a prompt — "M4 flange with 6 bolt holes on a 40 mm PCD" — and watch it materialise in 3D. Upload a napkin sketch, a photo of a worn part, or a competitor's product, and the AI Copilot infers an editable parametric model.</p>
|
|
1238
|
+
<p>Eight template families ship ready to parametrise. Everything else is generated by Claude, Gemini, or Groq.</p>
|
|
1239
|
+
<div class="products">
|
|
1240
|
+
<span class="pill ai">AI Copilot</span>
|
|
1241
|
+
<span class="pill ai">Text-to-CAD</span>
|
|
1242
|
+
<span class="pill ai">Image-to-CAD</span>
|
|
664
1243
|
</div>
|
|
665
1244
|
</div>
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
<h2 class="reveal">What makes it a <span class="gradient-text">"cycle" product</span></h2>
|
|
675
|
-
<p class="subtitle reveal">Six principles that define everything we build.</p>
|
|
676
|
-
|
|
677
|
-
<div class="dna-grid">
|
|
678
|
-
<div class="dna-card reveal">
|
|
679
|
-
<div class="dna-icon" style="background:rgba(46,134,222,0.12);">🔄</div>
|
|
680
|
-
<h4>Circular by Design</h4>
|
|
681
|
-
<p>cycleWASH machines are built for disassembly and repair. cycleCAD's rebuild guides and maintenance tools encode that philosophy into software.</p>
|
|
682
|
-
</div>
|
|
683
|
-
<div class="dna-card reveal">
|
|
684
|
-
<div class="dna-icon" style="background:rgba(212,168,67,0.12);">🌍</div>
|
|
685
|
-
<h4>Accessible to All</h4>
|
|
686
|
-
<p>No gatekeeping. cycleWASH publishes its part data openly. cycleCAD runs in any browser — no download, no license key, no barrier to entry.</p>
|
|
687
|
-
</div>
|
|
688
|
-
<div class="dna-card reveal">
|
|
689
|
-
<div class="dna-icon" style="background:rgba(139,111,192,0.12);">🏭</div>
|
|
690
|
-
<h4>Real-World Proven</h4>
|
|
691
|
-
<p>cycleCAD isn't academic software — it's been tested with complex cycleWASH machines. Every feature exists because a real engineering team needed it.</p>
|
|
692
|
-
</div>
|
|
693
|
-
<div class="dna-card reveal">
|
|
694
|
-
<div class="dna-icon" style="background:rgba(232,150,58,0.12);">🧠</div>
|
|
695
|
-
<h4>AI-Native Intelligence</h4>
|
|
696
|
-
<p>Both products leverage AI: cycleWASH uses smart diagnostics for predictive maintenance. cycleCAD integrates AI for part identification, cost estimation, and natural-language modeling.</p>
|
|
697
|
-
</div>
|
|
698
|
-
<div class="dna-card reveal">
|
|
699
|
-
<div class="dna-icon" style="background:rgba(58,175,169,0.12);">👥</div>
|
|
700
|
-
<h4>Community-Driven</h4>
|
|
701
|
-
<p>cycleWASH grew from the bike community. cycleCAD grows from the maker community. Both believe the best products are built with their users, not just for them.</p>
|
|
702
|
-
</div>
|
|
703
|
-
<div class="dna-card reveal">
|
|
704
|
-
<div class="dna-icon" style="background:rgba(224,85,85,0.12);">🇩🇪</div>
|
|
705
|
-
<h4>German Engineering, Global Reach</h4>
|
|
706
|
-
<p>Designed in Germany, deployed everywhere. cycleWASH machines operate across Europe. cycleCAD runs in any browser, any country, 6 languages.</p>
|
|
707
|
-
</div>
|
|
1245
|
+
<div class="visual vis-ideate">
|
|
1246
|
+
<span class="label-top">Brainstorm → Geometry</span>
|
|
1247
|
+
<div class="term">
|
|
1248
|
+
<div class="t-head"><span></span><span></span><span></span></div>
|
|
1249
|
+
<div class="line"><span class="prompt">you ▸</span> <span class="typed">flange Ø80 6 bolts PCD60</span></div>
|
|
1250
|
+
<div class="line response">parsing intent · detecting PCD pattern · generating flange geometry</div>
|
|
1251
|
+
<div class="line response" style="animation-delay: 5s">✓ 1 solid · 6 through-holes · outer Ø80mm</div>
|
|
1252
|
+
<div class="line response" style="animation-delay: 5.6s">✓ parametric (ready to edit)</div>
|
|
708
1253
|
</div>
|
|
709
1254
|
</div>
|
|
710
|
-
</
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
<
|
|
716
|
-
<div class="
|
|
717
|
-
<div class="
|
|
718
|
-
<
|
|
719
|
-
<
|
|
720
|
-
<
|
|
721
|
-
<
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
<
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
<
|
|
734
|
-
<
|
|
735
|
-
</
|
|
736
|
-
</
|
|
1255
|
+
</div>
|
|
1256
|
+
</section>
|
|
1257
|
+
|
|
1258
|
+
<!-- ─── 02 DESIGN ─── -->
|
|
1259
|
+
<section class="stage rev" id="design" data-animate>
|
|
1260
|
+
<div class="wrap stage-layout">
|
|
1261
|
+
<div class="visual vis-design">
|
|
1262
|
+
<div class="grid-bg"></div>
|
|
1263
|
+
<span class="label-top">Parametric · Sketch · Solid · Assembly</span>
|
|
1264
|
+
<svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
|
|
1265
|
+
<defs>
|
|
1266
|
+
<linearGradient id="design-grad" x1="0" y1="0" x2="1" y2="1">
|
|
1267
|
+
<stop offset="0" stop-color="#D4A843"/>
|
|
1268
|
+
<stop offset="1" stop-color="#2E86DE"/>
|
|
1269
|
+
</linearGradient>
|
|
1270
|
+
</defs>
|
|
1271
|
+
<rect class="draw" x="50" y="40" width="100" height="70" rx="6" stroke="url(#design-grad)" stroke-width="1.6" fill="none"/>
|
|
1272
|
+
<circle class="draw draw-2" cx="75" cy="75" r="14" stroke="url(#design-grad)" stroke-width="1.4" fill="none"/>
|
|
1273
|
+
<circle class="draw draw-2" cx="125" cy="75" r="14" stroke="url(#design-grad)" stroke-width="1.4" fill="none"/>
|
|
1274
|
+
<path class="draw draw-3" d="M50 40 L150 110 M50 110 L150 40" stroke="url(#design-grad)" stroke-width="0.6" opacity="0.3" fill="none"/>
|
|
1275
|
+
<g fill="#D4A843">
|
|
1276
|
+
<circle class="node" cx="50" cy="40" r="3"/>
|
|
1277
|
+
<circle class="node" cx="150" cy="40" r="3"/>
|
|
1278
|
+
<circle class="node" cx="50" cy="110" r="3"/>
|
|
1279
|
+
<circle class="node" cx="150" cy="110" r="3"/>
|
|
1280
|
+
</g>
|
|
1281
|
+
</svg>
|
|
737
1282
|
</div>
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
<h2 class="reveal">12 killer features. <span class="gradient-text">Zero competition.</span></h2>
|
|
747
|
-
<p class="subtitle reveal">No other browser CAD has all of these. Most desktop tools don't either. v3.9.0 — 52,000+ lines of module code across 46 modules.</p>
|
|
748
|
-
|
|
749
|
-
<!-- Stats Bar -->
|
|
750
|
-
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:2.5rem 0;text-align:center;" class="reveal">
|
|
751
|
-
<div style="background:var(--bg-card);border:1px solid var(--border-card);border-radius:12px;padding:20px;">
|
|
752
|
-
<div style="font-size:2rem;font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">12</div>
|
|
753
|
-
<div style="color:var(--text-secondary);font-size:0.85rem;margin-top:4px;">Killer Features</div>
|
|
754
|
-
</div>
|
|
755
|
-
<div style="background:var(--bg-card);border:1px solid var(--border-card);border-radius:12px;padding:20px;">
|
|
756
|
-
<div style="font-size:2rem;font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">52K+</div>
|
|
757
|
-
<div style="color:var(--text-secondary);font-size:0.85rem;margin-top:4px;">Lines of Code</div>
|
|
758
|
-
</div>
|
|
759
|
-
<div style="background:var(--bg-card);border:1px solid var(--border-card);border-radius:12px;padding:20px;">
|
|
760
|
-
<div style="font-size:2rem;font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">46</div>
|
|
761
|
-
<div style="color:var(--text-secondary);font-size:0.85rem;margin-top:4px;">JS Modules</div>
|
|
762
|
-
</div>
|
|
763
|
-
<div style="background:var(--bg-card);border:1px solid var(--border-card);border-radius:12px;padding:20px;">
|
|
764
|
-
<div style="font-size:2rem;font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">200+</div>
|
|
765
|
-
<div style="color:var(--text-secondary);font-size:0.85rem;margin-top:4px;">Standard Parts</div>
|
|
766
|
-
</div>
|
|
1283
|
+
<div class="stage-body">
|
|
1284
|
+
<div class="label"><span class="n">02</span>Design</div>
|
|
1285
|
+
<h2>Parametric CAD that actually runs <em>in a browser</em>.</h2>
|
|
1286
|
+
<p>Sketch, extrude, revolve, sweep, loft, fillet, chamfer, shell, boolean, pattern — the full Fusion 360 surface, minus the install, the annual licence, and the "quit everything to update" dance.</p>
|
|
1287
|
+
<p>A real B-rep kernel on OpenCascade.js. Thirteen sketch tools with twelve constraint types. Assemblies with seven joint types. Every feature is parametric and scriptable.</p>
|
|
1288
|
+
<div class="products">
|
|
1289
|
+
<span class="pill cyclecad">cycleCAD Modeller</span>
|
|
1290
|
+
<span class="pill cyclecad">Agent API</span>
|
|
767
1291
|
</div>
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
<
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
<p>Instant feedback for 9 processes: CNC, FDM, SLA, SLS, injection molding, sheet metal, sand/investment/die casting. 20+ materials database with cost estimator.</p>
|
|
785
|
-
</div>
|
|
786
|
-
|
|
787
|
-
<!-- Row 2: Simulation & Optimization -->
|
|
788
|
-
<div class="feature-card reveal">
|
|
789
|
-
<div class="feature-icon purple">🧬</div>
|
|
790
|
-
<h3>Generative Design</h3>
|
|
791
|
-
<p>SIMP topology optimization with live voxel visualization. Define loads and constraints, watch material dissolve away. Marching cubes isosurface, STL export.</p>
|
|
792
|
-
</div>
|
|
793
|
-
<div class="feature-card reveal">
|
|
794
|
-
<div class="feature-icon warn">🔬</div>
|
|
795
|
-
<h3>Multi-Physics Simulation</h3>
|
|
796
|
-
<p>Structural FEA (Von Mises), thermal analysis, modal frequency, drop test — all in-browser. Conjugate gradient solver, heatmap overlay, deformation visualization.</p>
|
|
797
|
-
</div>
|
|
798
|
-
<div class="feature-card reveal">
|
|
799
|
-
<div class="feature-icon coral">🔩</div>
|
|
800
|
-
<h3>Smart Parts Library</h3>
|
|
801
|
-
<p>200+ standard parts: ISO fasteners, bearings, linear rails, extrusions, motors, PCBs. AI-powered fuzzy search, BOM management, McMaster/Misumi/DigiKey cross-ref.</p>
|
|
802
|
-
</div>
|
|
803
|
-
|
|
804
|
-
<!-- Row 3: Assembly & Automation -->
|
|
805
|
-
<div class="feature-card reveal">
|
|
806
|
-
<div class="feature-icon gold">🧲</div>
|
|
807
|
-
<h3>Smart Assembly Mating</h3>
|
|
808
|
-
<p>Drag parts near each other — auto-detect 8 constraint types (coincident, concentric, tangent, gear). Motion study with joint animation, interference detection.</p>
|
|
809
|
-
</div>
|
|
810
|
-
<div class="feature-card reveal">
|
|
811
|
-
<div class="feature-icon blue">🤖</div>
|
|
812
|
-
<h3>Auto-Assemble Parts</h3>
|
|
813
|
-
<p>AI geometry fingerprinting matches shafts to holes, faces to faces, bolts to bores. One-click assembly with animated placement, collision detection, validation.</p>
|
|
814
|
-
</div>
|
|
815
|
-
<div class="feature-card reveal">
|
|
816
|
-
<div class="feature-icon teal">📊</div>
|
|
817
|
-
<h3>Parametric from Example</h3>
|
|
818
|
-
<p>Upload 2-5 design variants — AI infers which dimensions are parameters, detects relationships, generates a full parametric family with morphing animation.</p>
|
|
819
|
-
</div>
|
|
820
|
-
|
|
821
|
-
<!-- Row 4: Connected Manufacturing -->
|
|
822
|
-
<div class="feature-card reveal">
|
|
823
|
-
<div class="feature-icon purple">📡</div>
|
|
824
|
-
<h3>Digital Twin Live Data</h3>
|
|
825
|
-
<p>Connect IoT sensors (MQTT/REST/WebSocket) to your 3D model. Live temperature heatmaps, vibration animation, predictive maintenance, alert dashboard. cycleWASH-ready.</p>
|
|
826
|
-
</div>
|
|
827
|
-
<div class="feature-card reveal">
|
|
828
|
-
<div class="feature-icon warn">🖨️</div>
|
|
829
|
-
<h3>Machine Control (CNC/3DP)</h3>
|
|
830
|
-
<p>Built-in G-code generator for FDM, CNC milling, and laser cutting. Connect to OctoPrint, Klipper, or Moonraker. Jog controls, temp monitoring, job tracking.</p>
|
|
831
|
-
</div>
|
|
832
|
-
<div class="feature-card reveal">
|
|
833
|
-
<div class="feature-icon coral">📓</div>
|
|
834
|
-
<h3>Engineering Notebook</h3>
|
|
835
|
-
<p>Auto-logs every design action. Rich text entries, AI-powered summaries, version snapshots with visual diff, decision tracking. Export as HTML/Markdown/JSON report.</p>
|
|
836
|
-
</div>
|
|
1292
|
+
</div>
|
|
1293
|
+
</div>
|
|
1294
|
+
</section>
|
|
1295
|
+
|
|
1296
|
+
<!-- ─── 03 PRESENT ─── -->
|
|
1297
|
+
<section class="stage" id="present" data-animate>
|
|
1298
|
+
<div class="wrap stage-layout">
|
|
1299
|
+
<div class="stage-body">
|
|
1300
|
+
<div class="label"><span class="n">03</span>Present · Market</div>
|
|
1301
|
+
<h2>Marketing-ready visuals the moment the design is <em>ready</em>.</h2>
|
|
1302
|
+
<p>One-click exploded views. Photoreal renders against any scene, driven by Gemini's image model with your CAD geometry preserved. Annotations, measurements, section cuts, AR walkthroughs — all in a shareable URL.</p>
|
|
1303
|
+
<p>No PDF roundtrips. No render farm licence. Your customer sees exactly how the product goes together.</p>
|
|
1304
|
+
<div class="products">
|
|
1305
|
+
<span class="pill explode">ExplodeView</span>
|
|
1306
|
+
<span class="pill explode">AI Render</span>
|
|
1307
|
+
<span class="pill explode">AR Mode</span>
|
|
837
1308
|
</div>
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
<
|
|
841
|
-
|
|
1309
|
+
</div>
|
|
1310
|
+
<div class="visual vis-present">
|
|
1311
|
+
<span class="label-top">Exploded · Rendered · AR</span>
|
|
1312
|
+
<svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
|
|
1313
|
+
<g fill="rgba(58,175,169,0.16)" stroke="#3AAFA9" stroke-width="1.1">
|
|
1314
|
+
<rect class="part p1" x="70" y="55" width="20" height="20" rx="2"/>
|
|
1315
|
+
<rect class="part p2" x="90" y="55" width="20" height="20" rx="2"/>
|
|
1316
|
+
<rect class="part p3" x="110" y="55" width="20" height="20" rx="2"/>
|
|
1317
|
+
<rect class="part p4" x="70" y="75" width="20" height="20" rx="2"/>
|
|
1318
|
+
<circle class="part p5" cx="100" cy="85" r="7" fill="#3AAFA9"/>
|
|
1319
|
+
<rect class="part p6" x="110" y="75" width="20" height="20" rx="2"/>
|
|
1320
|
+
</g>
|
|
1321
|
+
<g stroke="#3AAFA9" stroke-width="0.6" class="dash" fill="none">
|
|
1322
|
+
<line x1="55" y1="45" x2="75" y2="60"/>
|
|
1323
|
+
<line x1="100" y1="35" x2="100" y2="55"/>
|
|
1324
|
+
<line x1="145" y1="45" x2="125" y2="60"/>
|
|
1325
|
+
<line x1="55" y1="110" x2="75" y2="90"/>
|
|
1326
|
+
<line x1="145" y1="110" x2="125" y2="90"/>
|
|
1327
|
+
</g>
|
|
1328
|
+
</svg>
|
|
1329
|
+
</div>
|
|
1330
|
+
</div>
|
|
1331
|
+
</section>
|
|
1332
|
+
|
|
1333
|
+
<!-- ─── 04 CAM ─── -->
|
|
1334
|
+
<section class="stage rev" id="cam" data-animate>
|
|
1335
|
+
<div class="wrap stage-layout">
|
|
1336
|
+
<div class="visual vis-cam">
|
|
1337
|
+
<span class="label-top">3+2 Strategies · Simulator · Post</span>
|
|
1338
|
+
<svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
|
|
1339
|
+
<!-- A/B axis halo -->
|
|
1340
|
+
<g class="ab-circle">
|
|
1341
|
+
<circle cx="100" cy="75" r="60" stroke="#2E86DE" stroke-width="0.4" stroke-dasharray="3 3" fill="none" opacity="0.5"/>
|
|
1342
|
+
</g>
|
|
1343
|
+
<!-- Stock -->
|
|
1344
|
+
<rect x="40" y="58" width="120" height="36" fill="#122240" stroke="#1E3A5F" stroke-width="1" rx="2"/>
|
|
1345
|
+
<!-- Toolpath (animated drawing) -->
|
|
1346
|
+
<path class="toolpath" d="M50 65 L150 65 L150 72 L50 72 L50 79 L150 79 L150 86 L50 86"
|
|
1347
|
+
stroke="#10B981" stroke-width="1.2" fill="none"/>
|
|
1348
|
+
<!-- Spindle (animated traveling) -->
|
|
1349
|
+
<g class="spindle">
|
|
1350
|
+
<rect x="-6" y="-26" width="12" height="20" fill="#5A6B85" stroke="#8B9AB5" stroke-width="0.4" rx="1"/>
|
|
1351
|
+
<polygon points="-3,-6 3,-6 0,0" fill="#F59E0B"/>
|
|
1352
|
+
<circle cx="0" cy="0" r="8" fill="rgba(245,158,11,0.15)"/>
|
|
1353
|
+
</g>
|
|
1354
|
+
<!-- Chips flying -->
|
|
1355
|
+
<g class="chip" transform="translate(100 70)">
|
|
1356
|
+
<circle cx="0" cy="0" r="1.5" fill="#F59E0B"/>
|
|
1357
|
+
<circle cx="3" cy="2" r="1" fill="#F59E0B"/>
|
|
1358
|
+
</g>
|
|
1359
|
+
<!-- Axis labels -->
|
|
1360
|
+
<text x="170" y="78" font-size="8" fill="#2E86DE" font-family="JetBrains Mono" opacity="0.6">A</text>
|
|
1361
|
+
<text x="96" y="12" font-size="8" fill="#2E86DE" font-family="JetBrains Mono" opacity="0.6">B</text>
|
|
1362
|
+
</svg>
|
|
1363
|
+
</div>
|
|
1364
|
+
<div class="stage-body">
|
|
1365
|
+
<div class="label"><span class="n">04</span>CAM</div>
|
|
1366
|
+
<h2>5-axis CAM in the browser. Built for <em>Pentamachine</em>.</h2>
|
|
1367
|
+
<p>Pentacad turns your cycleCAD model into 3+2 strategies tuned to the Pentamachine V2 kinematics. Twelve strategies from 2D contour to radial scallop finishing. An integrated 5-axis simulator replays the toolpath with collision and material-removal check before a chip flies.</p>
|
|
1368
|
+
<p>The post-processor emits the exact Pentamachine <code>.ngc</code> dialect — G20 imperial, G93 inverse-time feed, A/B rotary, up to 40 000 RPM.</p>
|
|
1369
|
+
<div class="products">
|
|
1370
|
+
<span class="pill pentacad">Pentacad CAM</span>
|
|
1371
|
+
<span class="pill pentacad">5-axis Simulator</span>
|
|
1372
|
+
<span class="pill pentacad">Pentamachine Post</span>
|
|
842
1373
|
</div>
|
|
1374
|
+
<p style="margin-top:18px">
|
|
1375
|
+
<a href="/pentacad.html" style="color:#34D399;text-decoration:none;font-weight:600;font-size:0.95rem;border-bottom:1px dashed rgba(52,211,153,0.45);padding-bottom:2px;transition:color 0.2s">Read the full Pentacad story →</a>
|
|
1376
|
+
</p>
|
|
843
1377
|
</div>
|
|
844
|
-
</
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
<
|
|
850
|
-
<div class="
|
|
851
|
-
<div class="
|
|
852
|
-
<h2
|
|
853
|
-
<p
|
|
854
|
-
|
|
855
|
-
<div class="
|
|
856
|
-
<
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
<p>GPT, Claude, Gemini, Llama, Mistral — any LLM can design, validate, and manufacture through cycleCAD's API. The agent IS the interface.</p>
|
|
860
|
-
</div>
|
|
861
|
-
<div class="persona-card reveal">
|
|
862
|
-
<div class="persona-icon">🔧</div>
|
|
863
|
-
<h4>Field Technician</h4>
|
|
864
|
-
<p>"I need a replacement bracket for the DUO." Their agent designs it, validates DFM, sends G-code to the printer. No CAD skills needed.</p>
|
|
865
|
-
</div>
|
|
866
|
-
<div class="persona-card reveal">
|
|
867
|
-
<div class="persona-icon">💼</div>
|
|
868
|
-
<h4>Product Manager</h4>
|
|
869
|
-
<p>"Make the frame 10% lighter." Their agent runs topology optimization through cycleCAD, presents three options.</p>
|
|
870
|
-
</div>
|
|
871
|
-
<div class="persona-card reveal">
|
|
872
|
-
<div class="persona-icon">📊</div>
|
|
873
|
-
<h4>Sales Engineer</h4>
|
|
874
|
-
<p>"Configure this for the client's specs." Their agent modifies the parametric model, exports a spec sheet, shares a 3D link.</p>
|
|
875
|
-
</div>
|
|
876
|
-
<div class="persona-card reveal">
|
|
877
|
-
<div class="persona-icon">🏭</div>
|
|
878
|
-
<h4>Factory Floor</h4>
|
|
879
|
-
<p>Machine sensors detect wear. An agent designs the replacement, validates tolerances, generates G-code. No human touched a mouse.</p>
|
|
880
|
-
</div>
|
|
881
|
-
<div class="persona-card reveal">
|
|
882
|
-
<div class="persona-icon">🔬</div>
|
|
883
|
-
<h4>Researcher</h4>
|
|
884
|
-
<p>"Design a centrifuge mount for 12,000 RPM." Their agent runs stress analysis through cycleCAD, iterates until it passes.</p>
|
|
885
|
-
</div>
|
|
886
|
-
<div class="persona-card reveal">
|
|
887
|
-
<div class="persona-icon">♻️</div>
|
|
888
|
-
<h4>Circular Economy</h4>
|
|
889
|
-
<p>End-of-life agent scans a product, identifies reusable parts, redesigns what's worn, routes recycling. The loop closes automatically.</p>
|
|
890
|
-
</div>
|
|
891
|
-
<div class="persona-card reveal">
|
|
892
|
-
<div class="persona-icon">🌐</div>
|
|
893
|
-
<h4>Agent Swarms</h4>
|
|
894
|
-
<p>Hundreds of agents working in parallel — designing, validating, manufacturing, repairing. 24/7. No GUI. No breaks. Just $CYCLE tokens flowing.</p>
|
|
895
|
-
</div>
|
|
1378
|
+
</div>
|
|
1379
|
+
</section>
|
|
1380
|
+
|
|
1381
|
+
<!-- ─── 05 PRODUCE ─── -->
|
|
1382
|
+
<section class="stage" id="produce" data-animate>
|
|
1383
|
+
<div class="wrap stage-layout">
|
|
1384
|
+
<div class="stage-body">
|
|
1385
|
+
<div class="label"><span class="n">05</span>Produce</div>
|
|
1386
|
+
<h2>Click <em>Run</em>. The browser becomes the shop floor.</h2>
|
|
1387
|
+
<p>A Docker bridge runs next to your machine on the shop LAN. The browser streams G-code over local WebSocket; live DRO, spindle load, probe data, and alarms stream back. Pause, resume, jog, feed override — from any device on the network.</p>
|
|
1388
|
+
<p>Safety is hardware-first. E-stop always wins. Every command is logged and replayable. Nothing leaves your LAN unless you opt in.</p>
|
|
1389
|
+
<div class="products">
|
|
1390
|
+
<span class="pill pentacad">Machine Bridge</span>
|
|
1391
|
+
<span class="pill pentacad">Live DRO</span>
|
|
1392
|
+
<span class="pill pentacad">Drip-feed</span>
|
|
896
1393
|
</div>
|
|
897
1394
|
</div>
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
<
|
|
924
|
-
<
|
|
925
|
-
</
|
|
926
|
-
|
|
927
|
-
<
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
<
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
1395
|
+
<div class="visual vis-produce">
|
|
1396
|
+
<span class="label-top">Browser → LAN Bridge → Kinetic Control</span>
|
|
1397
|
+
<svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
|
|
1398
|
+
<!-- Browser -->
|
|
1399
|
+
<g transform="translate(20 45)">
|
|
1400
|
+
<rect width="50" height="40" rx="3" fill="#122240" stroke="#10B981" stroke-width="1.2"/>
|
|
1401
|
+
<rect width="50" height="8" rx="3" fill="#10B981"/>
|
|
1402
|
+
<circle cx="5" cy="4" r="1.2" fill="#E05555"/>
|
|
1403
|
+
<circle cx="9" cy="4" r="1.2" fill="#F59E0B"/>
|
|
1404
|
+
<circle cx="13" cy="4" r="1.2" fill="#10B981"/>
|
|
1405
|
+
<text x="25" y="22" font-size="5" fill="#F0F0E8" text-anchor="middle" font-family="JetBrains Mono">pentacad</text>
|
|
1406
|
+
<text x="25" y="32" font-size="3.8" fill="#8B9AB5" text-anchor="middle" font-family="JetBrains Mono">
|
|
1407
|
+
<tspan class="dro-val">X 1.204 Y 0.872</tspan>
|
|
1408
|
+
</text>
|
|
1409
|
+
</g>
|
|
1410
|
+
<!-- Bridge -->
|
|
1411
|
+
<g transform="translate(85 58)">
|
|
1412
|
+
<rect width="30" height="14" rx="2" fill="#1A2D50" stroke="#8B6FC0" stroke-width="1"/>
|
|
1413
|
+
<text x="15" y="9" font-size="4" fill="#8B6FC0" text-anchor="middle" font-family="JetBrains Mono">BRIDGE</text>
|
|
1414
|
+
</g>
|
|
1415
|
+
<!-- Machine -->
|
|
1416
|
+
<g transform="translate(130 40)">
|
|
1417
|
+
<rect width="50" height="50" rx="2" fill="#122240" stroke="#E05555" stroke-width="1.2"/>
|
|
1418
|
+
<rect x="4" y="8" width="42" height="5" fill="#5A6B85"/>
|
|
1419
|
+
<rect x="20" y="13" width="10" height="18" fill="#8B9AB5"/>
|
|
1420
|
+
<polygon points="25,31 22,36 28,36" fill="#F59E0B"/>
|
|
1421
|
+
<text x="25" y="46" font-size="3.5" fill="#8B9AB5" text-anchor="middle" font-family="JetBrains Mono">Pentamachine V2</text>
|
|
1422
|
+
</g>
|
|
1423
|
+
<!-- Connection lines -->
|
|
1424
|
+
<line x1="70" y1="65" x2="85" y2="65" stroke="#3AAFA9" stroke-width="1" stroke-dasharray="2 2"/>
|
|
1425
|
+
<line x1="115" y1="65" x2="130" y2="65" stroke="#3AAFA9" stroke-width="1" stroke-dasharray="2 2"/>
|
|
1426
|
+
<!-- Packets flowing -->
|
|
1427
|
+
<circle class="packet packet-down" cx="0" cy="0" r="2" fill="#3AAFA9"/>
|
|
1428
|
+
<circle class="packet packet-up" cx="0" cy="0" r="2" fill="#F59E0B"/>
|
|
1429
|
+
<!-- Labels -->
|
|
1430
|
+
<text x="100" y="100" font-size="5" fill="#3AAFA9" text-anchor="middle" font-family="JetBrains Mono">G-code →</text>
|
|
1431
|
+
<text x="100" y="112" font-size="5" fill="#F59E0B" text-anchor="middle" font-family="JetBrains Mono">← DRO · alarms · spindle</text>
|
|
1432
|
+
</svg>
|
|
1433
|
+
</div>
|
|
1434
|
+
</div>
|
|
1435
|
+
</section>
|
|
1436
|
+
|
|
1437
|
+
<!-- PRODUCTS GRID -->
|
|
1438
|
+
<section class="products-section" id="products" data-animate>
|
|
1439
|
+
<div class="wrap">
|
|
1440
|
+
<span class="section-kicker">The Suite</span>
|
|
1441
|
+
<h2>Three products. <em>One</em> suite.</h2>
|
|
1442
|
+
<p class="sub">Each product works standalone. Together they cover everything.</p>
|
|
1443
|
+
|
|
1444
|
+
<div class="products-grid">
|
|
1445
|
+
|
|
1446
|
+
<div class="product-card p-cyclecad">
|
|
1447
|
+
<span class="status live">Live</span>
|
|
1448
|
+
<div class="pname">cycleCAD</div>
|
|
1449
|
+
<div class="ptag">Parametric 3D CAD</div>
|
|
1450
|
+
<p class="pdesc">The modelling core. Sketch, solid, assembly, surfacing, constraints — all browser-native.</p>
|
|
1451
|
+
<ul>
|
|
1452
|
+
<li>13 sketch tools · 12 constraints</li>
|
|
1453
|
+
<li>16 solid ops · real B-rep CSG</li>
|
|
1454
|
+
<li>Assembly · 7 joint types</li>
|
|
1455
|
+
<li>AI Copilot · 8 template families</li>
|
|
1456
|
+
<li>55-command Agent API</li>
|
|
1457
|
+
</ul>
|
|
1458
|
+
<div class="p-cta">
|
|
1459
|
+
<a href="/cyclecad.html" class="primary">Learn more</a>
|
|
1460
|
+
<a href="/app/">Launch</a>
|
|
940
1461
|
</div>
|
|
941
1462
|
</div>
|
|
942
1463
|
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
<div class="
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
<
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
<
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
<div class="pipeline-step" style="border-color:rgba(232,150,58,0.3);">
|
|
959
|
-
<div class="step-icon">🔬</div>
|
|
960
|
-
<div class="step-label" style="color:var(--accent-warn);">Validate</div>
|
|
961
|
-
<div class="step-desc">Analysis, DFM<br>cost, tolerance</div>
|
|
962
|
-
</div>
|
|
963
|
-
<div class="pipeline-arrow">→</div>
|
|
964
|
-
<div class="pipeline-step" style="border-color:rgba(58,175,169,0.3);">
|
|
965
|
-
<div class="step-icon">🏭</div>
|
|
966
|
-
<div class="step-label" style="color:var(--accent-teal);">Manufacture</div>
|
|
967
|
-
<div class="step-desc">G-code, STEP<br>to factory</div>
|
|
968
|
-
</div>
|
|
969
|
-
<div class="pipeline-arrow">→</div>
|
|
970
|
-
<div class="pipeline-step" style="border-color:rgba(212,168,67,0.3);">
|
|
971
|
-
<div class="step-icon">📦</div>
|
|
972
|
-
<div class="step-label" style="color:var(--accent-gold);">Product</div>
|
|
973
|
-
<div class="step-desc">Assembled &<br>delivered</div>
|
|
974
|
-
</div>
|
|
975
|
-
<div class="pipeline-arrow">→</div>
|
|
976
|
-
<div class="pipeline-step" style="border-color:rgba(46,134,222,0.3);">
|
|
977
|
-
<div class="step-icon">♻️</div>
|
|
978
|
-
<div class="step-label" style="color:var(--accent-blue);">End of Life</div>
|
|
979
|
-
<div class="step-desc">Repair, recycle<br>redesign</div>
|
|
1464
|
+
<div class="product-card p-explodeview">
|
|
1465
|
+
<span class="status live">Live</span>
|
|
1466
|
+
<div class="pname">ExplodeView</div>
|
|
1467
|
+
<div class="ptag">Viewer · AR · AI Render</div>
|
|
1468
|
+
<p class="pdesc">Any STEP file into an interactive 3D presentation — exploded, annotated, AR-ready, AI-rendered.</p>
|
|
1469
|
+
<ul>
|
|
1470
|
+
<li>STEP · GLB import</li>
|
|
1471
|
+
<li>Assembly tree · section cut</li>
|
|
1472
|
+
<li>AI part identifier + McMaster</li>
|
|
1473
|
+
<li>AI Render · preserved geometry</li>
|
|
1474
|
+
<li>Multi-language · WebXR AR</li>
|
|
1475
|
+
</ul>
|
|
1476
|
+
<div class="p-cta">
|
|
1477
|
+
<a href="/explodeview.html" class="primary">Learn more</a>
|
|
1478
|
+
<a href="https://explodeview.com/">Open app</a>
|
|
980
1479
|
</div>
|
|
981
1480
|
</div>
|
|
982
1481
|
|
|
983
|
-
<
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
<div class="machines-flow reveal">
|
|
999
|
-
<div class="machine-step" style="border-color:rgba(139,111,192,0.3);">
|
|
1000
|
-
<div class="m-label" style="color:var(--accent-purple);">AI Agent</div>
|
|
1001
|
-
<div class="m-desc">detects need</div>
|
|
1002
|
-
</div>
|
|
1003
|
-
<span class="pipeline-arrow">→</span>
|
|
1004
|
-
<div class="machine-step" style="border-color:rgba(212,168,67,0.3);">
|
|
1005
|
-
<div class="m-label" style="color:var(--accent-gold);">cycleCAD</div>
|
|
1006
|
-
<div class="m-desc">designs & validates</div>
|
|
1007
|
-
</div>
|
|
1008
|
-
<span class="pipeline-arrow">→</span>
|
|
1009
|
-
<div class="machine-step" style="border-color:rgba(232,150,58,0.3);">
|
|
1010
|
-
<div class="m-label" style="color:var(--accent-warn);">Factory</div>
|
|
1011
|
-
<div class="m-desc">produces the parts</div>
|
|
1012
|
-
</div>
|
|
1013
|
-
<span class="pipeline-arrow">→</span>
|
|
1014
|
-
<div class="machine-step" style="border-color:rgba(58,175,169,0.3);">
|
|
1015
|
-
<div class="m-label" style="color:var(--accent-teal);">Product</div>
|
|
1016
|
-
<div class="m-desc">assembled & delivered</div>
|
|
1017
|
-
</div>
|
|
1018
|
-
<span class="pipeline-arrow">→</span>
|
|
1019
|
-
<div class="machine-step" style="border-color:rgba(46,134,222,0.3);">
|
|
1020
|
-
<div class="m-label" style="color:var(--accent-blue);">♻️ Recycle</div>
|
|
1021
|
-
<div class="m-desc">circular economy</div>
|
|
1482
|
+
<div class="product-card p-pentacad">
|
|
1483
|
+
<span class="status coming">Phase 0</span>
|
|
1484
|
+
<div class="pname">Pentacad</div>
|
|
1485
|
+
<div class="ptag">CAM · Simulator · Bridge</div>
|
|
1486
|
+
<p class="pdesc">Browser-based 5-axis CAM, G-code simulator, and live machine control for desktop CNC.</p>
|
|
1487
|
+
<ul>
|
|
1488
|
+
<li>12 strategies including 3+2</li>
|
|
1489
|
+
<li>Pentamachine V2 post</li>
|
|
1490
|
+
<li>A/B kinematics simulator</li>
|
|
1491
|
+
<li>Kinetic Control bridge</li>
|
|
1492
|
+
<li>Live DRO · probe · feed over.</li>
|
|
1493
|
+
</ul>
|
|
1494
|
+
<div class="p-cta">
|
|
1495
|
+
<a href="/pentacad.html" class="primary">Learn more</a>
|
|
1496
|
+
<a href="/app/pentacad.html">Try app</a>
|
|
1022
1497
|
</div>
|
|
1023
1498
|
</div>
|
|
1024
1499
|
|
|
1025
|
-
<p class="reveal" style="max-width:750px;margin:0 auto;font-size:1.05rem;color:var(--accent-gold);font-weight:600;position:relative;z-index:1;">
|
|
1026
|
-
Every step consumes $CYCLE tokens. Every repaired part mints new ones. AI agents design. Factories produce. Products get repaired, not discarded. The token economy mirrors the circular economy — value flows in circles, forever.
|
|
1027
|
-
</p>
|
|
1028
1500
|
</div>
|
|
1029
|
-
</
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
<
|
|
1035
|
-
<div class="
|
|
1036
|
-
<div class="
|
|
1037
|
-
<
|
|
1038
|
-
<
|
|
1039
|
-
<div class="
|
|
1040
|
-
<div class="cap-item reveal"><div class="cap-icon">✏️</div><h4>Sketch & Constrain</h4><p>Lines, arcs, rectangles, circles</p></div>
|
|
1041
|
-
<div class="cap-item reveal"><div class="cap-icon">📦</div><h4>Extrude & Revolve</h4><p>Solid body creation</p></div>
|
|
1042
|
-
<div class="cap-item reveal"><div class="cap-icon">✂️</div><h4>Boolean Ops</h4><p>Cut, union, intersect</p></div>
|
|
1043
|
-
<div class="cap-item reveal"><div class="cap-icon">📏</div><h4>Measurement</h4><p>Distance, angle, 3-point</p></div>
|
|
1044
|
-
<div class="cap-item reveal"><div class="cap-icon">🔍</div><h4>Smart Search</h4><p>Natural language queries</p></div>
|
|
1045
|
-
<div class="cap-item reveal"><div class="cap-icon">🎯</div><h4>AI Identify</h4><p>Auto-classify parts</p></div>
|
|
1046
|
-
<div class="cap-item reveal"><div class="cap-icon">📋</div><h4>Smart BOM</h4><p>AI-generated bill of materials</p></div>
|
|
1047
|
-
<div class="cap-item reveal"><div class="cap-icon">🔥</div><h4>Maint. Heatmap</h4><p>Urgency color coding</p></div>
|
|
1048
|
-
<div class="cap-item reveal"><div class="cap-icon">📖</div><h4>Auto Manual</h4><p>Step-by-step instructions</p></div>
|
|
1049
|
-
<div class="cap-item reveal"><div class="cap-icon">📊</div><h4>Tech Reports</h4><p>Full HTML export</p></div>
|
|
1050
|
-
<div class="cap-item reveal"><div class="cap-icon">🔩</div><h4>McMaster Links</h4><p>Direct part sourcing</p></div>
|
|
1051
|
-
<div class="cap-item reveal"><div class="cap-icon">📸</div><h4>Screenshot Export</h4><p>High-res PNG capture</p></div>
|
|
1052
|
-
<div class="cap-item reveal"><div class="cap-icon">🔄</div><h4>Section Cut</h4><p>X/Y/Z clipping planes</p></div>
|
|
1053
|
-
<div class="cap-item reveal"><div class="cap-icon">📐</div><h4>Annotations</h4><p>Click-to-place pins</p></div>
|
|
1054
|
-
<div class="cap-item reveal"><div class="cap-icon">🖨️</div><h4>3D Print Slicer</h4><p>G-code generation</p></div>
|
|
1055
|
-
<div class="cap-item reveal"><div class="cap-icon">🌐</div><h4>6 Languages</h4><p>EN DE FR ES IT NL</p></div>
|
|
1056
|
-
</div>
|
|
1501
|
+
</div>
|
|
1502
|
+
</section>
|
|
1503
|
+
|
|
1504
|
+
<!-- STATS -->
|
|
1505
|
+
<section class="stats" data-animate>
|
|
1506
|
+
<div class="wrap">
|
|
1507
|
+
<div class="stats-grid">
|
|
1508
|
+
<div class="stat-card"><div class="n">44K+</div><div class="l">Lines of code</div></div>
|
|
1509
|
+
<div class="stat-card"><div class="n">1.9K</div><div class="l">Weekly downloads</div></div>
|
|
1510
|
+
<div class="stat-card"><div class="n">63</div><div class="l">Features shipped</div></div>
|
|
1511
|
+
<div class="stat-card"><div class="n">3</div><div class="l">Products in suite</div></div>
|
|
1057
1512
|
</div>
|
|
1058
|
-
</
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
<
|
|
1064
|
-
<
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
<
|
|
1068
|
-
<
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
</
|
|
1082
|
-
|
|
1083
|
-
<div class="pricing-card pro reveal">
|
|
1084
|
-
<div class="tier-name" style="color:var(--accent-blue);">ExplodeView Pro</div>
|
|
1085
|
-
<div class="tier-price" style="color:var(--accent-blue);">€49</div>
|
|
1086
|
-
<div class="tier-period">per month</div>
|
|
1087
|
-
<ul class="tier-features">
|
|
1088
|
-
<li>Everything in Free</li>
|
|
1089
|
-
<li>STEP import / export</li>
|
|
1090
|
-
<li>Real-time collaboration</li>
|
|
1091
|
-
<li>Cloud storage + versioning</li>
|
|
1092
|
-
<li>Machine control (CNC/3DP)</li>
|
|
1093
|
-
<li>Digital twin + IoT sensors</li>
|
|
1094
|
-
<li>Priority support</li>
|
|
1095
|
-
</ul>
|
|
1096
|
-
<div class="launch-badge">Most Popular</div>
|
|
1097
|
-
</div>
|
|
1098
|
-
<div class="pricing-card enterprise reveal">
|
|
1099
|
-
<div class="tier-name" style="color:var(--accent-gold);">ExplodeView Enterprise</div>
|
|
1100
|
-
<div class="tier-price" style="color:var(--accent-gold);">€299</div>
|
|
1101
|
-
<div class="tier-period">per month</div>
|
|
1102
|
-
<ul class="tier-features">
|
|
1103
|
-
<li>Everything in Pro</li>
|
|
1104
|
-
<li>Self-hosted deployment</li>
|
|
1105
|
-
<li>SSO / SAML authentication</li>
|
|
1106
|
-
<li>SLA guarantee</li>
|
|
1107
|
-
<li>MCP server + REST API</li>
|
|
1108
|
-
<li>Custom agent integrations</li>
|
|
1109
|
-
<li>Dedicated support</li>
|
|
1110
|
-
</ul>
|
|
1513
|
+
</div>
|
|
1514
|
+
</section>
|
|
1515
|
+
|
|
1516
|
+
<!-- CTA BLOCK -->
|
|
1517
|
+
<section class="cta-block">
|
|
1518
|
+
<div class="wrap">
|
|
1519
|
+
<h2>Start anywhere. <em>Ship</em> everywhere.</h2>
|
|
1520
|
+
<p>Use cycleCAD to design. Use ExplodeView to present. Use Pentacad to machine. Or use all three in sequence — the suite is built to flow.</p>
|
|
1521
|
+
<div class="ctas">
|
|
1522
|
+
<a href="/app/" class="btn btn-primary">Launch the app <span class="arrow">→</span></a>
|
|
1523
|
+
<a href="/pentacad.html" class="btn btn-secondary">Explore Pentacad</a>
|
|
1524
|
+
</div>
|
|
1525
|
+
</div>
|
|
1526
|
+
</section>
|
|
1527
|
+
|
|
1528
|
+
<!-- FOUNDER -->
|
|
1529
|
+
<section class="founder">
|
|
1530
|
+
<div class="wrap">
|
|
1531
|
+
<div class="note-box">
|
|
1532
|
+
<p>Every CNC shop I know runs the same five tools every day — SolidWorks or Fusion, Mastercam or HSM, a simulator if they can afford one, a proprietary post, and some patchwork control software. Switching between them wastes hours. The cycleCAD Suite is what happens when you refuse to accept that.</p>
|
|
1533
|
+
<div class="sig">
|
|
1534
|
+
<div class="avatar">S</div>
|
|
1535
|
+
<div>
|
|
1536
|
+
<div class="name">Sachin Kumar</div>
|
|
1537
|
+
<div class="role">Founder · cycleCAD, ExplodeView, Pentacad</div>
|
|
1111
1538
|
</div>
|
|
1112
1539
|
</div>
|
|
1113
1540
|
</div>
|
|
1114
|
-
</
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
<
|
|
1120
|
-
<div class="
|
|
1121
|
-
<div class="
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
<div class="pricing-grid">
|
|
1126
|
-
<div class="pricing-card starter reveal" style="text-align:left;">
|
|
1127
|
-
<div class="tier-name" style="color:var(--accent-teal);">Consume</div>
|
|
1128
|
-
<div style="font-size:2.8rem;margin:0.5rem 0;">🪙</div>
|
|
1129
|
-
<div class="tier-period" style="color:var(--accent-teal);font-weight:600;font-size:0.95rem;">Spend $CYCLE tokens</div>
|
|
1130
|
-
<ul class="tier-features" style="margin-top:1rem;">
|
|
1131
|
-
<li>AI agents pay tokens per design operation</li>
|
|
1132
|
-
<li>Parametric modeling, AI analysis, validation</li>
|
|
1133
|
-
<li>STEP export, G-code generation</li>
|
|
1134
|
-
<li>Manufacturing routing & DFM checks</li>
|
|
1135
|
-
<li>Usage-based — pay only for what you use</li>
|
|
1136
|
-
</ul>
|
|
1137
|
-
</div>
|
|
1138
|
-
<div class="pricing-card pro reveal" style="text-align:left;border-color:rgba(212,168,67,0.3);">
|
|
1139
|
-
<div class="tier-name" style="color:var(--accent-gold);">Create</div>
|
|
1140
|
-
<div style="font-size:2.8rem;margin:0.5rem 0;">⛏️</div>
|
|
1141
|
-
<div class="tier-period" style="color:var(--accent-gold);font-weight:600;font-size:0.95rem;">Earn $CYCLE coins</div>
|
|
1142
|
-
<ul class="tier-features" style="margin-top:1rem;">
|
|
1143
|
-
<li>Design reusable parts → earn tokens</li>
|
|
1144
|
-
<li>Validate designs for others → earn tokens</li>
|
|
1145
|
-
<li>Contribute to the circular economy → earn tokens</li>
|
|
1146
|
-
<li>Repair/refurbish data → earn tokens</li>
|
|
1147
|
-
<li>Value creation = value capture</li>
|
|
1148
|
-
</ul>
|
|
1149
|
-
</div>
|
|
1150
|
-
<div class="pricing-card enterprise reveal" style="text-align:left;">
|
|
1151
|
-
<div class="tier-name" style="color:var(--accent-purple);">The Cycle</div>
|
|
1152
|
-
<div style="font-size:2.8rem;margin:0.5rem 0;">♻️</div>
|
|
1153
|
-
<div class="tier-period" style="color:var(--accent-purple);font-weight:600;font-size:0.95rem;">Circular token flow</div>
|
|
1154
|
-
<ul class="tier-features" style="margin-top:1rem;">
|
|
1155
|
-
<li>AI agents design → tokens consumed</li>
|
|
1156
|
-
<li>Manufactured products → tokens minted</li>
|
|
1157
|
-
<li>Parts repaired/reused → tokens earned</li>
|
|
1158
|
-
<li>Economy grows with every cycle</li>
|
|
1159
|
-
<li>The more circular, the more valuable</li>
|
|
1160
|
-
</ul>
|
|
1161
|
-
</div>
|
|
1541
|
+
</div>
|
|
1542
|
+
</section>
|
|
1543
|
+
|
|
1544
|
+
<!-- FOOTER -->
|
|
1545
|
+
<footer>
|
|
1546
|
+
<div class="wrap">
|
|
1547
|
+
<div class="row">
|
|
1548
|
+
<div class="col brand-col">
|
|
1549
|
+
<span class="brand">cycle<em>CAD</em> suite</span>
|
|
1550
|
+
<p>From idea to finished part, in one browser tab. Open-source CAD for designers, makers, and CNC shops.</p>
|
|
1162
1551
|
</div>
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
<
|
|
1166
|
-
<
|
|
1552
|
+
<div class="col">
|
|
1553
|
+
<h4>Products</h4>
|
|
1554
|
+
<a href="/cyclecad.html">cycleCAD</a>
|
|
1555
|
+
<a href="/explodeview.html">ExplodeView</a>
|
|
1556
|
+
<a href="/pentacad.html">Pentacad</a>
|
|
1167
1557
|
</div>
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
============================================================ -->
|
|
1174
|
-
<section class="showcase" id="showcase">
|
|
1175
|
-
<div class="container">
|
|
1176
|
-
<div class="section-label reveal">BUILT FOR REAL PRODUCTS</div>
|
|
1177
|
-
<h2 class="reveal">Tested with <span class="gradient-text">complex cycleWASH machines</span></h2>
|
|
1178
|
-
<div class="showcase-visual reveal">
|
|
1179
|
-
<div class="app-mockup">
|
|
1180
|
-
<div class="mockup-toolbar">
|
|
1181
|
-
<div class="mockup-dot red"></div>
|
|
1182
|
-
<div class="mockup-dot yellow"></div>
|
|
1183
|
-
<div class="mockup-dot green"></div>
|
|
1184
|
-
<div class="mockup-toolbar-items">
|
|
1185
|
-
<div class="mockup-toolbar-item" style="width:32px"></div>
|
|
1186
|
-
<div class="mockup-toolbar-item" style="width:32px"></div>
|
|
1187
|
-
<div class="mockup-toolbar-item" style="width:32px"></div>
|
|
1188
|
-
<div class="mockup-toolbar-item" style="width:24px"></div>
|
|
1189
|
-
<div style="margin-left:auto;display:flex;gap:6px;">
|
|
1190
|
-
<div class="mockup-toolbar-item" style="width:50px;background:rgba(212,168,67,0.3);"></div>
|
|
1191
|
-
<div class="mockup-toolbar-item" style="width:50px;background:rgba(46,134,222,0.2);"></div>
|
|
1192
|
-
</div>
|
|
1193
|
-
</div>
|
|
1194
|
-
</div>
|
|
1195
|
-
<div class="mockup-body">
|
|
1196
|
-
<div class="mockup-sidebar">
|
|
1197
|
-
<div style="height:4px;width:70px;background:#D4A843;opacity:0.5;border-radius:2px;margin-bottom:12px;"></div>
|
|
1198
|
-
<div style="font-size:8px;color:var(--text-muted);margin-bottom:4px;font-family:monospace;">Assembly Tree</div>
|
|
1199
|
-
<div class="mockup-tree-item" style="width:90%;background:rgba(212,168,67,0.2);"></div>
|
|
1200
|
-
<div class="mockup-tree-item indent" style="width:65%"></div>
|
|
1201
|
-
<div class="mockup-tree-item indent" style="width:70%"></div>
|
|
1202
|
-
<div class="mockup-tree-item indent active" style="width:55%"></div>
|
|
1203
|
-
<div class="mockup-tree-item" style="width:80%"></div>
|
|
1204
|
-
<div class="mockup-tree-item indent" style="width:60%"></div>
|
|
1205
|
-
<div class="mockup-tree-item indent" style="width:65%"></div>
|
|
1206
|
-
<div class="mockup-tree-item" style="width:85%"></div>
|
|
1207
|
-
<div class="mockup-tree-item indent" style="width:50%"></div>
|
|
1208
|
-
<div class="mockup-tree-item indent" style="width:70%"></div>
|
|
1209
|
-
<div class="mockup-tree-item" style="width:75%"></div>
|
|
1210
|
-
<div class="mockup-tree-item indent" style="width:55%"></div>
|
|
1211
|
-
<div style="font-size:7px;color:var(--text-muted);margin-top:12px;font-family:monospace;">Parts loaded</div>
|
|
1212
|
-
</div>
|
|
1213
|
-
<div class="mockup-viewport">
|
|
1214
|
-
<div class="mockup-grid"></div>
|
|
1215
|
-
<div style="position:relative;z-index:1;text-align:center;">
|
|
1216
|
-
<div style="font-size:48px;opacity:0.7;">🚲</div>
|
|
1217
|
-
<div style="color:var(--text-muted);font-size:11px;margin-top:8px;">cycleWASH Machine — Hundreds of Parts, Multiple Assemblies</div>
|
|
1218
|
-
</div>
|
|
1219
|
-
</div>
|
|
1220
|
-
<div class="mockup-props">
|
|
1221
|
-
<div style="font-size:8px;color:#2E86DE;font-family:monospace;margin-bottom:8px;">AI Identified</div>
|
|
1222
|
-
<div class="mockup-prop-label"></div>
|
|
1223
|
-
<div class="mockup-prop-value" style="background:rgba(58,175,169,0.2);"></div>
|
|
1224
|
-
<div class="mockup-prop-label" style="width:50px"></div>
|
|
1225
|
-
<div class="mockup-prop-value" style="width:65px;background:rgba(212,168,67,0.2);"></div>
|
|
1226
|
-
<div style="height:1px;background:var(--border-card);margin:12px 0;"></div>
|
|
1227
|
-
<div style="font-size:8px;color:#2E86DE;font-family:monospace;margin-bottom:8px;">McMaster-Carr</div>
|
|
1228
|
-
<div class="mockup-prop-value" style="background:rgba(46,134,222,0.15);width:80px;"></div>
|
|
1229
|
-
<div class="mockup-prop-value" style="background:rgba(46,134,222,0.15);width:65px;"></div>
|
|
1230
|
-
</div>
|
|
1231
|
-
</div>
|
|
1232
|
-
</div>
|
|
1558
|
+
<div class="col">
|
|
1559
|
+
<h4>Resources</h4>
|
|
1560
|
+
<a href="https://github.com/vvlars-cmd/cyclecad#readme">Documentation</a>
|
|
1561
|
+
<a href="https://github.com/vvlars-cmd/cyclecad/blob/main/cycleCAD-Architecture.pptx">Architecture</a>
|
|
1562
|
+
<a href="https://github.com/vvlars-cmd/cyclecad/blob/main/docs/API-REFERENCE.md">API reference</a>
|
|
1233
1563
|
</div>
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
<div class="hero-ctas reveal">
|
|
1245
|
-
<a href="/app/" class="btn-primary">Explore the Platform</a>
|
|
1246
|
-
<a href="https://github.com/vvlars-cmd/cyclecad" target="_blank" class="btn-secondary">View on GitHub</a>
|
|
1564
|
+
<div class="col">
|
|
1565
|
+
<h4>Developers</h4>
|
|
1566
|
+
<a href="https://github.com/vvlars-cmd/cyclecad">GitHub</a>
|
|
1567
|
+
<a href="https://www.npmjs.com/package/cyclecad">npm</a>
|
|
1568
|
+
<a href="https://github.com/vvlars-cmd/cyclecad/blob/main/server/mcp-server.js">MCP server</a>
|
|
1569
|
+
</div>
|
|
1570
|
+
<div class="col">
|
|
1571
|
+
<h4>Contact</h4>
|
|
1572
|
+
<a href="mailto:sachin.kumar@cyclewash.com">Email</a>
|
|
1573
|
+
<a href="https://cyclewash.de/en">cycleWASH</a>
|
|
1247
1574
|
</div>
|
|
1248
1575
|
</div>
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
<footer>
|
|
1253
|
-
<div class="container">
|
|
1254
|
-
<a href="#" class="nav-logo">
|
|
1255
|
-
<div class="nav-logo-icon" style="width:24px;height:24px;font-size:14px;border-radius:6px;">⚙</div>
|
|
1256
|
-
<span class="cycle">cycle</span><span class="cad">CAD</span>
|
|
1257
|
-
</a>
|
|
1258
|
-
<ul class="footer-links">
|
|
1259
|
-
<li><a href="https://cyclewash.de/en" target="_blank">cycleWASH</a></li>
|
|
1260
|
-
<li><a href="https://github.com/vvlars-cmd/cyclecad" target="_blank">GitHub</a></li>
|
|
1261
|
-
<li><a href="mailto:sachin.kumar@cyclewash.com">Contact</a></li>
|
|
1262
|
-
</ul>
|
|
1263
|
-
<p>© 2026 cycleCAD by cycleWASH. All rights reserved.</p>
|
|
1576
|
+
<div class="legal">
|
|
1577
|
+
<span>© 2026 cycleCAD Suite · Sachin Kumar</span>
|
|
1578
|
+
<span>cycleCAD MIT · ExplodeView MIT · Pentacad AGPL-3.0</span>
|
|
1264
1579
|
</div>
|
|
1265
|
-
</
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1580
|
+
</div>
|
|
1581
|
+
</footer>
|
|
1582
|
+
|
|
1583
|
+
<div class="scroll-hint" id="scrollHint">Scroll to explore</div>
|
|
1584
|
+
|
|
1585
|
+
<script>
|
|
1586
|
+
/* ─────────────────────────────────────────────
|
|
1587
|
+
SCROLL-TRIGGERED ANIMATION
|
|
1588
|
+
───────────────────────────────────────────── */
|
|
1589
|
+
(() => {
|
|
1590
|
+
const elements = document.querySelectorAll('[data-animate]');
|
|
1591
|
+
const observer = new IntersectionObserver((entries) => {
|
|
1592
|
+
entries.forEach(e => {
|
|
1593
|
+
if (e.isIntersecting) {
|
|
1594
|
+
e.target.classList.add('in-view');
|
|
1595
|
+
if (e.target.classList.contains('stages')) e.target.classList.add('anim');
|
|
1596
|
+
if (e.target.dataset.once !== 'false') observer.unobserve(e.target);
|
|
1597
|
+
}
|
|
1598
|
+
});
|
|
1599
|
+
}, { threshold: 0.2, rootMargin: '0px 0px -80px 0px' });
|
|
1600
|
+
|
|
1601
|
+
elements.forEach(el => observer.observe(el));
|
|
1602
|
+
})();
|
|
1603
|
+
|
|
1604
|
+
/* ─────────────────────────────────────────────
|
|
1605
|
+
SCROLL HINT
|
|
1606
|
+
───────────────────────────────────────────── */
|
|
1607
|
+
(() => {
|
|
1608
|
+
const hint = document.getElementById('scrollHint');
|
|
1609
|
+
let shown = false;
|
|
1610
|
+
setTimeout(() => { hint.classList.add('show'); shown = true; }, 1800);
|
|
1611
|
+
window.addEventListener('scroll', () => {
|
|
1612
|
+
if (window.scrollY > 200 && shown) { hint.classList.remove('show'); shown = false; }
|
|
1613
|
+
});
|
|
1614
|
+
})();
|
|
1615
|
+
|
|
1616
|
+
/* ─────────────────────────────────────────────
|
|
1617
|
+
MOUSE-TRACKED BUTTON GLOW
|
|
1618
|
+
───────────────────────────────────────────── */
|
|
1619
|
+
(() => {
|
|
1620
|
+
document.querySelectorAll('.btn-primary').forEach(btn => {
|
|
1621
|
+
btn.addEventListener('mousemove', (e) => {
|
|
1622
|
+
const r = btn.getBoundingClientRect();
|
|
1623
|
+
btn.style.setProperty('--mx', `${((e.clientX - r.left) / r.width) * 100}%`);
|
|
1624
|
+
btn.style.setProperty('--my', `${((e.clientY - r.top) / r.height) * 100}%`);
|
|
1625
|
+
});
|
|
1626
|
+
});
|
|
1627
|
+
})();
|
|
1628
|
+
|
|
1629
|
+
/* ─────────────────────────────────────────────
|
|
1630
|
+
DRO FAKE TELEMETRY
|
|
1631
|
+
───────────────────────────────────────────── */
|
|
1632
|
+
(() => {
|
|
1633
|
+
const el = document.querySelector('.dro-val');
|
|
1634
|
+
if (!el) return;
|
|
1635
|
+
let x = 1.204, y = 0.872, z = 0.5, a = 20.3, b = 63.4;
|
|
1636
|
+
setInterval(() => {
|
|
1637
|
+
x += (Math.random() - 0.5) * 0.02;
|
|
1638
|
+
y += (Math.random() - 0.5) * 0.01;
|
|
1639
|
+
el.textContent = `X ${x.toFixed(3)} Y ${y.toFixed(3)}`;
|
|
1640
|
+
}, 900);
|
|
1641
|
+
})();
|
|
1642
|
+
|
|
1643
|
+
/* ─────────────────────────────────────────────
|
|
1644
|
+
PARALLAX ON VISUALS
|
|
1645
|
+
───────────────────────────────────────────── */
|
|
1646
|
+
(() => {
|
|
1647
|
+
const visuals = document.querySelectorAll('.visual');
|
|
1648
|
+
let scrollY = window.scrollY;
|
|
1649
|
+
let ticking = false;
|
|
1650
|
+
window.addEventListener('scroll', () => {
|
|
1651
|
+
scrollY = window.scrollY;
|
|
1652
|
+
if (!ticking) {
|
|
1653
|
+
requestAnimationFrame(() => {
|
|
1654
|
+
visuals.forEach(v => {
|
|
1655
|
+
const r = v.getBoundingClientRect();
|
|
1656
|
+
if (r.bottom > 0 && r.top < window.innerHeight) {
|
|
1657
|
+
const pct = (window.innerHeight - r.top) / (window.innerHeight + r.height);
|
|
1658
|
+
v.style.setProperty('transform', `translateY(${(pct - 0.5) * -24}px)`);
|
|
1659
|
+
}
|
|
1660
|
+
});
|
|
1661
|
+
ticking = false;
|
|
1276
1662
|
});
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1663
|
+
ticking = true;
|
|
1664
|
+
}
|
|
1665
|
+
});
|
|
1666
|
+
})();
|
|
1667
|
+
|
|
1668
|
+
/* ─────────────────────────────────────────────
|
|
1669
|
+
END-TO-END JOURNEY CYCLING
|
|
1670
|
+
Each journey cycles through 6 steps every 15s (2.5s per step).
|
|
1671
|
+
Rows are offset from each other so something is always animating.
|
|
1672
|
+
───────────────────────────────────────────── */
|
|
1673
|
+
(() => {
|
|
1674
|
+
const STEP_DURATION = 2500; // ms per step
|
|
1675
|
+
const STEP_COUNT = 6;
|
|
1676
|
+
const OFFSETS = { bell: 0, flange: 1, opener: 2 }; // which step each starts on
|
|
1677
|
+
const STEP_NAMES = ['Ideate', 'Design', 'Market', 'Sell', 'Manufacture', 'Feedback'];
|
|
1678
|
+
|
|
1679
|
+
function setActiveStep(journey, stepIdx) {
|
|
1680
|
+
const steps = journey.querySelectorAll('.jstep');
|
|
1681
|
+
steps.forEach((s, i) => {
|
|
1682
|
+
s.classList.remove('active', 'done');
|
|
1683
|
+
if (i < stepIdx) s.classList.add('done');
|
|
1684
|
+
if (i === stepIdx) s.classList.add('active');
|
|
1294
1685
|
});
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1686
|
+
const timer = journey.querySelector('.jstep-n');
|
|
1687
|
+
if (timer) timer.textContent = stepIdx + 1;
|
|
1688
|
+
}
|
|
1689
|
+
|
|
1690
|
+
function cycleJourney(journey, startStep = 0) {
|
|
1691
|
+
let step = startStep;
|
|
1692
|
+
setActiveStep(journey, step);
|
|
1693
|
+
const interval = setInterval(() => {
|
|
1694
|
+
step = (step + 1) % STEP_COUNT;
|
|
1695
|
+
setActiveStep(journey, step);
|
|
1696
|
+
}, STEP_DURATION);
|
|
1697
|
+
journey._interval = interval;
|
|
1698
|
+
}
|
|
1699
|
+
|
|
1700
|
+
// Start cycling only after the journeys section scrolls into view,
|
|
1701
|
+
// so the animation is ready when the user sees it.
|
|
1702
|
+
const journeysSection = document.querySelector('section.journeys');
|
|
1703
|
+
let started = false;
|
|
1704
|
+
|
|
1705
|
+
const startAll = () => {
|
|
1706
|
+
if (started) return;
|
|
1707
|
+
started = true;
|
|
1708
|
+
document.querySelectorAll('.journey').forEach(j => {
|
|
1709
|
+
const key = j.dataset.journey;
|
|
1710
|
+
const offset = OFFSETS[key] ?? 0;
|
|
1711
|
+
cycleJourney(j, offset);
|
|
1712
|
+
});
|
|
1713
|
+
};
|
|
1714
|
+
|
|
1715
|
+
if (journeysSection) {
|
|
1716
|
+
const obs = new IntersectionObserver((entries) => {
|
|
1717
|
+
entries.forEach(e => { if (e.isIntersecting) { startAll(); obs.disconnect(); } });
|
|
1718
|
+
}, { threshold: 0.25 });
|
|
1719
|
+
obs.observe(journeysSection);
|
|
1720
|
+
}
|
|
1721
|
+
|
|
1722
|
+
// Pause on hover over any journey
|
|
1723
|
+
document.querySelectorAll('.journey').forEach(j => {
|
|
1724
|
+
j.addEventListener('mouseenter', () => { if (j._interval) { clearInterval(j._interval); j._interval = null; } });
|
|
1725
|
+
j.addEventListener('mouseleave', () => {
|
|
1726
|
+
if (!j._interval) {
|
|
1727
|
+
const activeIdx = [...j.querySelectorAll('.jstep')].findIndex(s => s.classList.contains('active'));
|
|
1728
|
+
cycleJourney(j, activeIdx >= 0 ? activeIdx : 0);
|
|
1301
1729
|
}
|
|
1302
1730
|
});
|
|
1303
|
-
|
|
1731
|
+
// Click a step to jump to it
|
|
1732
|
+
j.querySelectorAll('.jstep').forEach((s, i) => {
|
|
1733
|
+
s.addEventListener('click', () => {
|
|
1734
|
+
if (j._interval) { clearInterval(j._interval); j._interval = null; }
|
|
1735
|
+
setActiveStep(j, i);
|
|
1736
|
+
});
|
|
1737
|
+
});
|
|
1738
|
+
});
|
|
1739
|
+
})();
|
|
1740
|
+
|
|
1741
|
+
console.log(
|
|
1742
|
+
'%ccycleCAD Suite',
|
|
1743
|
+
'font-family:Fraunces,serif;font-size:18px;color:#D4A843;font-weight:700'
|
|
1744
|
+
);
|
|
1745
|
+
console.log('%cOpen source · MIT + AGPL · github.com/vvlars-cmd/cyclecad', 'color:#8B9AB5');
|
|
1746
|
+
</script>
|
|
1304
1747
|
|
|
1305
1748
|
</body>
|
|
1306
|
-
</html>
|
|
1749
|
+
</html>
|