github-starred/cs249r_book
2
0
Fork 0
mirror of https://github.com/harvard-edge/cs249r_book.git synced 2026-03-11 17:49:25 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(landing): replace sliders with DAM/C3 hexagon cube animation

Browse Source
This commit is contained in:
Vijay Janapa Reddi
2026-02-26 13:12:38 -05:00
parent 05ada2698d
commit 9420cfb87e
2 changed files with 116 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
book/quarto/landing_site/index.qmd
View File

@@ -143,21 +143,61 @@ format:
<div class="mls-landing-right">
<div class="mls-feature-card">
<div class="css-sliders-wrapper">
<div class="css-slider">
<div class="slider-label">Compute</div>
<div class="slider-track"><div class="slider-fill fill1"></div><div class="slider-thumb thumb1"></div></div>
<div class="hex-wrapper">
<svg class="hex-lines" viewBox="0 0 320 240" xmlns="http://www.w3.org/2000/svg">
<!-- Outer Hexagon (The boundary) -->
<polygon points="160,40 229,80 229,160 160,200 91,160 91,80" fill="none" stroke="currentColor" stroke-width="1.5" class="hex-polygon" />
<!-- Inner Connections (Forming the 3D Cube illusion) -->
<!-- The "Y" shape (front edges) -->
<line x1="160" y1="120" x2="160" y2="200" stroke="currentColor" stroke-width="1.5" class="hex-line" />
<line x1="160" y1="120" x2="229" y2="80" stroke="currentColor" stroke-width="1.5" class="hex-line" />
<line x1="160" y1="120" x2="91" y2="80" stroke="currentColor" stroke-width="1.5" class="hex-line" />
<!-- The "Hidden" back edges (creating a transparent/wireframe cube) -->
<line x1="160" y1="40" x2="160" y2="120" stroke="currentColor" stroke-width="1" class="hex-line" style="opacity: 0.4;" />
<line x1="91" y1="160" x2="160" y2="120" stroke="currentColor" stroke-width="1" class="hex-line" style="opacity: 0.4;" />
<line x1="229" y1="160" x2="160" y2="120" stroke="currentColor" stroke-width="1" class="hex-line" style="opacity: 0.4;" />
<!-- Moving dots along the "cube" edges -->
<circle r="4" class="hex-dot dot-dam">
<animateMotion dur="8s" repeatCount="indefinite" path="M 160,40 L 91,80 L 160,120 L 229,80 L 160,40 Z" />
</circle>
<circle r="4" class="hex-dot dot-c3">
<animateMotion dur="8s" repeatCount="indefinite" path="M 160,200 L 91,160 L 160,120 L 229,160 L 160,200 Z" />
</circle>
</svg>
<!-- Nodes -->
<!-- Top Face (DAM) -->
<div class="hex-node node-alg">
<div class="node-circle dam-color"></div>
<span class="node-label">Algorithm</span>
</div>
<div class="css-slider">
<div class="slider-label">Memory</div>
<div class="slider-track"><div class="slider-fill fill2"></div><div class="slider-thumb thumb2"></div></div>
<div class="hex-node node-data">
<div class="node-circle dam-color"></div>
<span class="node-label">Data</span>
</div>
<div class="css-slider">
<div class="slider-label">Latency</div>
<div class="slider-track"><div class="slider-fill fill3"></div><div class="slider-thumb thumb3"></div></div>
<div class="hex-node node-comp">
<div class="node-circle dam-color"></div>
<span class="node-label">Machine</span>
</div>
<!-- Bottom Faces (C3) -->
<div class="hex-node node-comm">
<div class="node-circle c3-color"></div>
<span class="node-label">Compute</span>
</div>
<div class="hex-node node-coord">
<div class="node-circle c3-color"></div>
<span class="node-label">Communicate</span>
</div>
<div class="hex-node node-mach">
<div class="node-circle c3-color"></div>
<span class="node-label">Coordinate</span>
</div>
</div>
<p class="mls-feature-desc">Hands-on exercises for performance engineering and scaling.</p>
<p class="mls-feature-desc">The core design space: balancing D&middot;A&middot;M workload characteristics with C³ infrastructure constraints.</p>
</div>
</div>
</div>

123
book/quarto/landing_site/landing.css
View File

@@ -480,75 +480,82 @@ main.content,
50% { opacity: 0; }
}
/* Sliders Animation */
.css-sliders-wrapper {
/* Hexagon/Cube Taxonomy Animation */
.hex-wrapper {
position: relative;
width: 220px;
background: var(--mls-slider-bg);
border-radius: 12px;
padding: 20px;
box-shadow: var(--mls-card-shadow);
border: 1px solid var(--mls-card-border);
width: 320px;
height: 240px;
margin: 0 auto 2rem auto;
}
.css-slider {
margin-bottom: 15px;
}
.css-slider:last-child {
margin-bottom: 0;
}
.slider-label {
font-size: 0.75rem;
font-weight: 600;
.hex-lines {
position: absolute;
top: 20px;
left: 60px;
width: 200px;
height: 200px;
overflow: visible;
color: var(--mls-text-muted);
margin-bottom: 5px;
text-align: left;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.4;
}
.slider-track {
width: 100%;
height: 6px;
background: var(--mls-slider-track);
border-radius: 3px;
.hex-polygon, .hex-line {
stroke-dasharray: 6 6;
animation: hexDash 20s linear infinite;
}
@keyframes hexDash {
to { stroke-dashoffset: 200; }
}
.hex-dot {
filter: drop-shadow(0 0 4px currentColor);
}
.dot-dam { color: var(--mls-accent); fill: var(--mls-accent); }
.dot-c3 { color: #4285F4; fill: #4285F4; }
.hex-node {
position: absolute;
display: flex;
align-items: center;
gap: 8px;
z-index: 2;
}
/* Center is at (160, 120). Radius is 80. */
.node-alg { top: 40px; left: 160px; transform: translate(-50%, -100%); flex-direction: column; padding-bottom: 8px;}
.node-comp { top: 80px; left: 229px; transform: translate(0, -50%); padding-left: 8px;}
.node-coord { top: 160px; left: 229px; transform: translate(0, -50%); padding-left: 8px;}
.node-mach { top: 200px; left: 160px; transform: translate(-50%, 0); flex-direction: column; padding-top: 8px;}
.node-comm { top: 160px; left: 91px; transform: translate(-100%, -50%); flex-direction: row-reverse; padding-right: 8px;}
.node-data { top: 80px; left: 91px; transform: translate(-100%, -50%); flex-direction: row-reverse; padding-right: 8px;}
.node-circle {
width: 12px;
height: 12px;
background: var(--mls-card-bg);
border: 2px solid var(--mls-text);
border-radius: 50%;
flex-shrink: 0;
position: relative;
}
.slider-fill {
.node-circle::after {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
background: var(--mls-accent);
border-radius: 3px;
}
.slider-thumb {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
background: var(--mls-slider-thumb);
border: 2px solid var(--mls-accent);
top: 2px; left: 2px; right: 2px; bottom: 2px;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
background: currentColor;
opacity: 0.5;
}
.dam-color { border-color: var(--mls-accent); color: var(--mls-accent); box-shadow: 0 0 10px rgba(165,28,48,0.2); }
[data-bs-theme="dark"] .dam-color { box-shadow: 0 0 10px rgba(255,77,109,0.3); }
.c3-color { border-color: #4285F4; color: #4285F4; box-shadow: 0 0 10px rgba(66,133,244,0.2); }
.node-label {
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--mls-text);
white-space: nowrap;
}
/* Animations for sliders */
.fill1 { animation: slideFill1 4s infinite alternate ease-in-out; }
.thumb1 { animation: slideThumb1 4s infinite alternate ease-in-out; }
.fill2 { animation: slideFill2 5s infinite alternate ease-in-out; background: #4285F4; }
.thumb2 { animation: slideThumb2 5s infinite alternate ease-in-out; border-color: #4285F4; }
.fill3 { animation: slideFill3 3.5s infinite alternate ease-in-out; background: #34A853; }
.thumb3 { animation: slideThumb3 3.5s infinite alternate ease-in-out; border-color: #34A853; }
@keyframes slideFill1 { 0% { width: 20%; } 100% { width: 80%; } }
@keyframes slideThumb1 { 0% { left: 20%; } 100% { left: 80%; } }
@keyframes slideFill2 { 0% { width: 70%; } 100% { width: 30%; } }
@keyframes slideThumb2 { 0% { left: 70%; } 100% { left: 30%; } }
@keyframes slideFill3 { 0% { width: 40%; } 100% { width: 90%; } }
@keyframes slideThumb3 { 0% { left: 40%; } 100% { left: 90%; } }
.mls-feature-image {
.mls-feature-image {
max-width: 140px;