Skip to content

Commit 55c4fd0

Browse files
Chamath-AdithyaChamath-Adithya
committed
feat: implement animated 3D chip and orbit visual in the hero section.
1 parent 19b81eb commit 55c4fd0

2 files changed

Lines changed: 206 additions & 2 deletions

File tree

‎docs/assets/css/main.css‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -343,6 +343,189 @@ h1 {
343343
gap: 1.5rem;
344344
}
345345

346+
/* Hero Grid Layout */
347+
.hero-grid {
348+
display: grid;
349+
grid-template-columns: 1fr 1fr;
350+
align-items: center;
351+
gap: 4rem;
352+
}
353+
354+
.hero-visual {
355+
display: flex;
356+
justify-content: center;
357+
align-items: center;
358+
perspective: 1000px;
359+
}
360+
361+
/* 3D Chip Container */
362+
.chip-3d-container {
363+
position: relative;
364+
width: 200px;
365+
height: 200px;
366+
display: flex;
367+
justify-content: center;
368+
align-items: center;
369+
}
370+
371+
.chip-3d {
372+
width: 100px;
373+
height: 100px;
374+
position: relative;
375+
transform-style: preserve-3d;
376+
animation: chip-rotate 10s linear infinite;
377+
}
378+
379+
@keyframes chip-rotate {
380+
0% {
381+
transform: rotateX(-20deg) rotateY(0deg);
382+
}
383+
384+
100% {
385+
transform: rotateX(-20deg) rotateY(360deg);
386+
}
387+
}
388+
389+
.chip-face {
390+
position: absolute;
391+
width: 100px;
392+
height: 100px;
393+
background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
394+
border: 2px solid rgba(255, 255, 255, 0.2);
395+
display: flex;
396+
align-items: center;
397+
justify-content: center;
398+
font-weight: 800;
399+
font-size: 1rem;
400+
color: white;
401+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
402+
backface-visibility: visible;
403+
}
404+
405+
.chip-front {
406+
transform: translateZ(50px);
407+
}
408+
409+
.chip-back {
410+
transform: rotateY(180deg) translateZ(50px);
411+
background: linear-gradient(135deg, #8b5cf6, var(--primary-color));
412+
}
413+
414+
.chip-left {
415+
transform: rotateY(-90deg) translateZ(50px);
416+
}
417+
418+
.chip-right {
419+
transform: rotateY(90deg) translateZ(50px);
420+
}
421+
422+
.chip-top {
423+
transform: rotateX(90deg) translateZ(50px);
424+
}
425+
426+
.chip-bottom {
427+
transform: rotateX(-90deg) translateZ(50px);
428+
}
429+
430+
/* Orbit Ring */
431+
.orbit-ring {
432+
position: absolute;
433+
width: 180px;
434+
height: 180px;
435+
border: 1px solid rgba(59, 130, 246, 0.3);
436+
border-radius: 50%;
437+
animation: orbit-spin 8s linear infinite;
438+
}
439+
440+
@keyframes orbit-spin {
441+
0% {
442+
transform: rotateX(60deg) rotateZ(0deg);
443+
}
444+
445+
100% {
446+
transform: rotateX(60deg) rotateZ(360deg);
447+
}
448+
}
449+
450+
.orbit-dot {
451+
position: absolute;
452+
width: 12px;
453+
height: 12px;
454+
background: var(--primary-color);
455+
border-radius: 50%;
456+
box-shadow: 0 0 20px var(--primary-color);
457+
}
458+
459+
.orbit-dot:nth-child(1) {
460+
top: 0;
461+
left: 50%;
462+
transform: translate(-50%, -50%);
463+
}
464+
465+
.orbit-dot:nth-child(2) {
466+
bottom: 0;
467+
left: 50%;
468+
transform: translate(-50%, 50%);
469+
}
470+
471+
.orbit-dot:nth-child(3) {
472+
top: 50%;
473+
right: 0;
474+
transform: translate(50%, -50%);
475+
}
476+
477+
/* Pulse Rings */
478+
.pulse-ring {
479+
position: absolute;
480+
width: 120px;
481+
height: 120px;
482+
border: 2px solid var(--primary-color);
483+
border-radius: 50%;
484+
opacity: 0;
485+
animation: pulse-expand 3s ease-out infinite;
486+
}
487+
488+
.pulse-ring.delay-1 {
489+
animation-delay: 1s;
490+
}
491+
492+
.pulse-ring.delay-2 {
493+
animation-delay: 2s;
494+
}
495+
496+
@keyframes pulse-expand {
497+
0% {
498+
transform: scale(1);
499+
opacity: 0.6;
500+
}
501+
502+
100% {
503+
transform: scale(2);
504+
opacity: 0;
505+
}
506+
}
507+
508+
/* Responsive */
509+
@media (max-width: 968px) {
510+
.hero-grid {
511+
grid-template-columns: 1fr;
512+
text-align: center;
513+
}
514+
515+
.hero-content {
516+
order: 1;
517+
}
518+
519+
.hero-visual {
520+
order: 2;
521+
margin-top: 2rem;
522+
}
523+
524+
.cta-group {
525+
justify-content: center;
526+
}
527+
}
528+
346529
/* Configurator */
347530
.configurator {
348531
padding: 8rem 0;

‎docs/index.html‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,8 @@
8686
</nav>
8787

8888
<header class="hero">
89-
<div class="container">
90-
<div class="hero-content" data-aos="fade-up" data-aos-duration="1000">
89+
<div class="container hero-grid">
90+
<div class="hero-content" data-aos="fade-right" data-aos-duration="1000">
9191
<span class="badge">v2.0.0 Released</span>
9292
<h1>Secure ESP32 Provisioning <br> <span class="text-gradient">Made Simple.</span></h1>
9393
<p class="hero-text">
@@ -101,6 +101,27 @@ <h1>Secure ESP32 Provisioning <br> <span class="text-gradient">Made Simple.</spa
101101
<a href="documentation.html" class="btn btn-secondary glass-btn">Read Docs</a>
102102
</div>
103103
</div>
104+
105+
<div class="hero-visual" data-aos="fade-left" data-aos-duration="1200" data-aos-delay="200">
106+
<div class="chip-3d-container">
107+
<div class="chip-3d">
108+
<div class="chip-face chip-front">ESP32</div>
109+
<div class="chip-face chip-back"></div>
110+
<div class="chip-face chip-left"></div>
111+
<div class="chip-face chip-right"></div>
112+
<div class="chip-face chip-top"></div>
113+
<div class="chip-face chip-bottom"></div>
114+
</div>
115+
<div class="orbit-ring">
116+
<div class="orbit-dot"></div>
117+
<div class="orbit-dot"></div>
118+
<div class="orbit-dot"></div>
119+
</div>
120+
<div class="pulse-ring"></div>
121+
<div class="pulse-ring delay-1"></div>
122+
<div class="pulse-ring delay-2"></div>
123+
</div>
124+
</div>
104125
</div>
105126
</header>
106127

0 commit comments

Comments
 (0)