Neon Glass 3D Cards
DepthFold documents an interactive single-page gallery of dimensional interface cards. The layout is split into clear regions: an introductory hero, a responsive grid presenting six structural themes—glass orb bodies with stacked highlights, chamfered corners, high-contrast neo surfaces, wide-format cinema tiles, prismatic crystal facets, and layered void stacks. Each theme combines gradients, rim light, stacked glass planes, micro-interactions on social rows, and hover-driven tilt using CSS perspective and three-dimensional transforms. A spotlight deck presents four complementary panels in sequence, with arrow controls, dot indicators, keyboard navigation, and horizontal drag on the viewport; the deck viewport stays left-to-right for stable geometry while page direction mirrors for reading order where relevant. The page defaults to English and can switch to Arabic at runtime, updating text direction and control affordances. Ambient motion includes scroll-triggered section reveals and optional pointer-linked decoration in the hero when reduced-motion is off; when users prefer reduced motion, transitions simplify and heavy transforms fall back. The chrome uses a dark canvas with neon accent lines, a sticky glass-style header with brand block and language control, and footer closure. Markup favors semantic landmarks, hierarchical headings, named sections, focus-visible outlines, and descriptive labels on interactive elements to support keyboard use and resize across phone, tablet, and desktop widths
Source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Neon glass · 3D cards · UI lab</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta
name="description"
content="DepthFold documents an interactive single-page gallery of dimensional interface cards. The layout is split into clear regions: an introductory hero, a responsive grid presenting six structural themes—glass orb bodies with stacked highlights, chamfered corners, high-contrast neo surfaces, wide-format cinema tiles, prismatic crystal facets, and layered void stacks. Each theme combines gradients, rim light, stacked glass planes, micro-interactions on social rows, and hover-driven tilt using CSS perspective and three-dimensional transforms. A spotlight deck presents four complementary panels in sequence, with arrow controls, dot indicators, keyboard navigation, and horizontal drag on the viewport; the deck viewport stays left-to-right for stable geometry while page direction mirrors for reading order where relevant. The page defaults to English and can switch to Arabic at runtime, updating text direction and control affordances. Ambient motion includes scroll-triggered section reveals and optional pointer-linked decoration in the hero when reduced-motion is off; when users prefer reduced motion, transitions simplify and heavy transforms fall back. The chrome uses a dark canvas with neon accent lines, a sticky glass-style header with brand block and language control, and footer closure. Markup favors semantic landmarks, hierarchical headings, named sections, focus-visible outlines, and descriptive labels on interactive elements to support keyboard use and resize across phone, tablet, and desktop widths."
/>
<meta
name="keywords"
content="#DepthFold, #DimensionalCards, #Glassmorphism, #CSS3D, #Perspective, #Transform, #NeonUI, #DarkTheme, #ShapeSystem, #CardGrid, #Chamfer, #CrystalFacet, #LayeredStack, #SpotlightDeck, #Carousel, #Bilingual, #RTL, #LTR, #i18n, #A11y, #ReducedMotion, #SemanticHTML, #StickyHeader, #ScrollReveal, #Responsive, #FrontEnd, #InteractiveCSS, #Gradients, #HoverTilt, DepthFold, dimensional cards, glass UI, CSS transforms, adaptive layout"
/>
<meta name="theme-color" content="#040807" />
<meta name="color-scheme" content="dark" />
<meta property="og:type" content="website" />
<meta property="og:title" content="DepthFold — Interactive dimensional card gallery" />
<meta
property="og:description"
content="DepthFold documents an interactive single-page gallery of dimensional interface cards. The layout is split into clear regions: an introductory hero, a responsive grid presenting six structural themes—glass orb bodies with stacked highlights, chamfered corners, high-contrast neo surfaces, wide-format cinema tiles, prismatic crystal facets, and layered void stacks. Each theme combines gradients, rim light, stacked glass planes, micro-interactions on social rows, and hover-driven tilt using CSS perspective and three-dimensional transforms. A spotlight deck presents four complementary panels in sequence, with arrow controls, dot indicators, keyboard navigation, and horizontal drag on the viewport; the deck viewport stays left-to-right for stable geometry while page direction mirrors for reading order where relevant. The page defaults to English and can switch to Arabic at runtime, updating text direction and control affordances. Ambient motion includes scroll-triggered section reveals and optional pointer-linked decoration in the hero when reduced-motion is off; when users prefer reduced motion, transitions simplify and heavy transforms fall back. The chrome uses a dark canvas with neon accent lines, a sticky glass-style header with brand block and language control, and footer closure. Markup favors semantic landmarks, hierarchical headings, named sections, focus-visible outlines, and descriptive labels on interactive elements to support keyboard use and resize across phone, tablet, and desktop widths."
/>
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="ar" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="DepthFold — Interactive dimensional card gallery" />
<meta
name="twitter:description"
content="DepthFold documents an interactive single-page gallery of dimensional interface cards. The layout is split into clear regions: an introductory hero, a responsive grid presenting six structural themes—glass orb bodies with stacked highlights, chamfered corners, high-contrast neo surfaces, wide-format cinema tiles, prismatic crystal facets, and layered void stacks. Each theme combines gradients, rim light, stacked glass planes, micro-interactions on social rows, and hover-driven tilt using CSS perspective and three-dimensional transforms. A spotlight deck presents four complementary panels in sequence, with arrow controls, dot indicators, keyboard navigation, and horizontal drag on the viewport; the deck viewport stays left-to-right for stable geometry while page direction mirrors for reading order where relevant. The page defaults to English and can switch to Arabic at runtime, updating text direction and control affordances. Ambient motion includes scroll-triggered section reveals and optional pointer-linked decoration in the hero when reduced-motion is off; when users prefer reduced motion, transitions simplify and heavy transforms fall back. The chrome uses a dark canvas with neon accent lines, a sticky glass-style header with brand block and language control, and footer closure. Markup favors semantic landmarks, hierarchical headings, named sections, focus-visible outlines, and descriptive labels on interactive elements to support keyboard use and resize across phone, tablet, and desktop widths."
/>
<title data-i18n="meta.title">DepthFold — Interactive dimensional card gallery</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Tajawal:wght@400;500;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header class="site-top">
<a class="site-identity" href="#main" data-i18n-aria="nav.ariaHome">
<span class="site-mark" aria-hidden="true"></span>
<span class="site-brand-block">
<span class="site-brand" data-i18n="nav.brand">DepthFold</span>
<span class="site-tag" data-i18n="nav.tag">Neon glass · 3D cards · UI lab</span>
</span>
</a>
<button type="button" class="btn-lang" data-lang-toggle data-i18n="nav.lang">العربية</button>
</header>
<main id="main">
<section class="hero hero-shell" data-hero-motion aria-labelledby="hero-title">
<div class="hero__layout">
<div class="hero__copy">
<p class="hero__eyebrow" data-i18n="hero.eyebrow">Interactive shape lab</p>
<h1 id="hero-title"><span data-i18n="hero.title">Dimensional interface cards</span></h1>
<p class="hero__lead" data-i18n="hero.sub">Glass, neon depth, and tactile motion — hover cards for parallax, then open the spotlight deck. Built to scale from prototype to production.</p>
<div class="hero__actions">
<a class="hero__btn hero__btn--primary" href="#grid-title" data-i18n="hero.cta1">Explore the grid</a>
<a class="hero__btn hero__btn--ghost" href="#orbit-title" data-i18n="hero.cta2">Spotlight deck</a>
</div>
</div>
<div class="hero__visual" aria-hidden="true">
<span class="hero-blob hero-blob--a"></span>
<span class="hero-blob hero-blob--b"></span>
<span class="hero-blob hero-blob--c"></span>
<span class="hero-pill hero-pill--wide"></span>
<span class="hero-pill hero-pill--tall"></span>
<span class="hero-ring hero-ring--outer"></span>
<span class="hero-ring hero-ring--inner"></span>
<span class="hero-hex"></span>
<span class="hero-slab"></span>
</div>
</div>
</section>
<section class="section section--reveal" aria-labelledby="grid-title">
<div class="section-head">
<h2 id="grid-title" data-i18n="sec.grid">Shape system</h2>
<p data-i18n="sec.grid.sub">Six structural variants: orb glass, chamfer cut, neo surface, cinema wide, crystal facet, layered stack.</p>
</div>
<div class="shape-grid">
<!-- Mint orb -->
<div class="ux-parent ux-parent--mint">
<div class="ux-card">
<div class="ux-logo" aria-hidden="true">
<span class="ux-circle"></span><span class="ux-circle"></span><span class="ux-circle"></span><span class="ux-circle"></span>
<span class="ux-circle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.667 31.69" aria-hidden="true">
<path d="M12.827,1.628A1.561,1.561,0,0,1,14.31,0h2.964a1.561,1.561,0,0,1,1.483,1.628v11.9a9.252,9.252,0,0,1-2.432,6.852q-2.432,2.409-6.963,2.409T2.4,20.452Q0,18.094,0,13.669V1.628A1.561,1.561,0,0,1,1.483,0h2.98A1.561,1.561,0,0,1,5.947,1.628V13.191a5.635,5.635,0,0,0,.85,3.451,3.153,3.153,0,0,0,2.632,1.094,3.032,3.032,0,0,0,2.582-1.076,5.836,5.836,0,0,0,.816-3.486Z"/>
<path d="M75.207,20.857a1.561,1.561,0,0,1-1.483,1.628h-2.98a1.561,1.561,0,0,1-1.483-1.628V1.628A1.561,1.561,0,0,1,70.743,0h2.98a1.561,1.561,0,0,1,1.483,1.628Z" transform="translate(-45.91 0)"/>
<path d="M0,80.018A1.561,1.561,0,0,1,1.483,78.39h26.7a1.561,1.561,0,0,1,1.483,1.628v2.006a1.561,1.561,0,0,1-1.483,1.628H1.483A1.561,1.561,0,0,1,0,82.025Z" transform="translate(0 -51.963)"/>
</svg>
</span>
</div>
<div class="ux-glass"></div>
<div class="ux-content">
<span class="ux-title" data-i18n="card.orb.title">Orb glass</span>
<span class="ux-text" data-i18n="card.orb.text">Soft pill body with stacked glass and concentric depth cues.</span>
</div>
<div class="ux-bottom">
<div class="ux-social">
<button type="button" class="ux-social-btn" aria-label="Instagram"><svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M 9.9980469 3 C 6.1390469 3 3 6.1419531 3 10.001953 L 3 20.001953 C 3 23.860953 6.1419531 27 10.001953 27 L 20.001953 27 C 23.860953 27 27 23.858047 27 19.998047 L 27 9.9980469 C 27 6.1390469 23.858047 3 19.998047 3 L 9.9980469 3 z M 22 7 C 22.552 7 23 7.448 23 8 C 23 8.552 22.552 9 22 9 C 21.448 9 21 8.552 21 8 C 21 7.448 21.448 7 22 7 z M 15 9 C 18.309 9 21 11.691 21 15 C 21 18.309 18.309 21 15 21 C 11.691 21 9 18.309 9 15 C 9 11.691 11.691 9 15 9 z M 15 11 A 4 4 0 0 0 11 15 A 4 4 0 0 0 15 19 A 4 4 0 0 0 19 15 A 4 4 0 0 0 15 11 z"/></svg></button>
<button type="button" class="ux-social-btn" aria-label="X"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg></button>
<button type="button" class="ux-social-btn" aria-label="Discord"><svg viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg"><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg></button>
</div>
<div class="ux-more">
<button type="button" class="ux-more-btn"><span data-i18n="cta.more">Open</span></button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
</div>
</div>
</div>
</div>
<!-- Violet chamfer -->
<div class="ux-parent ux-parent--violet ux-parent--cut">
<div class="ux-card">
<div class="ux-logo" aria-hidden="true">
<span class="ux-circle"></span><span class="ux-circle"></span><span class="ux-circle"></span><span class="ux-circle"></span>
<span class="ux-circle"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#fff" d="M12 2L4 7v10l8 5 8-5V7l-8-5zm0 2.2l5.5 3.4L12 10.9 6.5 7.6 12 4.2zM6 9.9l5 3v6.1l-5-3.1V9.9zm12 6.1l-5 3.1v-6.2l5-3v6.1z"/></svg></span>
</div>
<div class="ux-glass"></div>
<div class="ux-content">
<span class="ux-title" data-i18n="card.chamfer.title">Chamfer cut</span>
<span class="ux-text" data-i18n="card.chamfer.text">Precision corners via clip-path — reads sharp on dark UI.</span>
</div>
<div class="ux-bottom">
<div class="ux-social">
<button type="button" class="ux-social-btn" aria-label="A"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/></svg></button>
<button type="button" class="ux-social-btn" aria-label="B"><svg viewBox="0 0 24 24"><rect x="7" y="7" width="10" height="10" rx="2"/></svg></button>
<button type="button" class="ux-social-btn" aria-label="C"><svg viewBox="0 0 24 24"><path d="M12 5l7 12H5z"/></svg></button>
</div>
<div class="ux-more">
<button type="button" class="ux-more-btn"><span data-i18n="cta.more">Open</span></button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
</div>
</div>
</div>
</div>
<!-- Solar -->
<div class="ux-parent ux-parent--solar">
<div class="ux-card">
<div class="ux-logo" aria-hidden="true">
<span class="ux-circle"></span><span class="ux-circle"></span><span class="ux-circle"></span><span class="ux-circle"></span>
<span class="ux-circle"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4" fill="none" stroke="#fff" stroke-width="2"/><path fill="#fff" d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></span>
</div>
<div class="ux-glass"></div>
<div class="ux-content">
<span class="ux-title" data-i18n="card.brutal.title">Neo surface</span>
<span class="ux-text" data-i18n="card.brutal.text">High-contrast rim, hard shadow, and electric accent rail.</span>
</div>
<div class="ux-bottom">
<div class="ux-social">
<button type="button" class="ux-social-btn" aria-label="A"><svg viewBox="0 0 24 24"><path d="M5 20L12 4l7 16H5z"/></svg></button>
<button type="button" class="ux-social-btn" aria-label="B"><svg viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="2"/></svg></button>
<button type="button" class="ux-social-btn" aria-label="C"><svg viewBox="0 0 24 24"><path d="M12 4l8 14H4z"/></svg></button>
</div>
<div class="ux-more">
<button type="button" class="ux-more-btn"><span data-i18n="cta.more">Open</span></button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
</div>
</div>
</div>
</div>
<!-- Cinema wide -->
<div class="ux-parent ux-parent--wide ux-parent--ocean ux-parent--span-2">
<div class="ux-card">
<div class="ux-logo" aria-hidden="true">
<span class="ux-circle"></span><span class="ux-circle"></span><span class="ux-circle"></span><span class="ux-circle"></span>
<span class="ux-circle"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#fff" d="M8 5v14l11-7-11-7z"/></svg></span>
</div>
<div class="ux-glass"></div>
<div class="ux-content">
<span class="ux-title" data-i18n="card.cinema.title">Cinema wide</span>
<span class="ux-text" data-i18n="card.cinema.text">Landscape canvas for metrics, trailers, or dashboard hero tiles.</span>
</div>
<div class="ux-bottom">
<div class="ux-social">
<button type="button" class="ux-social-btn" aria-label="A"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6"/></svg></button>
<button type="button" class="ux-social-btn" aria-label="B"><svg viewBox="0 0 24 24"><path d="M8 12h8M12 8v8"/></svg></button>
<button type="button" class="ux-social-btn" aria-label="C"><svg viewBox="0 0 24 24"><path d="M12 6c-3 4-3 8 0 12 3-4 3-8 0-12z"/></svg></button>
</div>
<div class="ux-more">
<button type="button" class="ux-more-btn"><span data-i18n="cta.more">Open</span></button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
</div>
</div>
</div>
</div>
<!-- Prism -->
<div class="ux-parent ux-parent--prism">
<div class="ux-card">
<div class="ux-logo" aria-hidden="true">
<span class="ux-circle"></span><span class="ux-circle"></span><span class="ux-circle"></span><span class="ux-circle"></span>
<span class="ux-circle"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#fff" d="M12 2l9 16H3L12 2zm0 4.5L7.5 16h9L12 6.5z"/></svg></span>
</div>
<div class="ux-glass"></div>
<div class="ux-content">
<span class="ux-title" data-i18n="card.facet.title">Crystal facet</span>
<span class="ux-text" data-i18n="card.facet.text">Angular gradient break with prismatic highlight pass.</span>
</div>
<div class="ux-bottom">
<div class="ux-social">
<button type="button" class="ux-social-btn" aria-label="A"><svg viewBox="0 0 24 24"><path d="M4 12h16M12 4v16"/></svg></button>
<button type="button" class="ux-social-btn" aria-label="B"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="7"/></svg></button>
<button type="button" class="ux-social-btn" aria-label="C"><svg viewBox="0 0 24 24"><path d="M12 3l9 18H3L12 3z"/></svg></button>
</div>
<div class="ux-more">
<button type="button" class="ux-more-btn"><span data-i18n="cta.more">Open</span></button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
</div>
</div>
</div>
</div>
<!-- Void stack -->
<div class="ux-parent ux-parent--void">
<div class="ux-card">
<div class="ux-logo" aria-hidden="true">
<span class="ux-circle"></span><span class="ux-circle"></span><span class="ux-circle"></span><span class="ux-circle"></span>
<span class="ux-circle"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#fff" d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/></svg></span>
</div>
<div class="ux-glass"></div>
<div class="ux-content">
<span class="ux-title" data-i18n="card.stack.title">Layered stack</span>
<span class="ux-text" data-i18n="card.stack.text">Three floating sheets with parallax on hover.</span>
</div>
<div class="ux-bottom">
<div class="ux-social">
<button type="button" class="ux-social-btn" aria-label="A"><svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20z"/></svg></button>
<button type="button" class="ux-social-btn" aria-label="B"><svg viewBox="0 0 24 24"><path d="M4 8h16v8H4z"/></svg></button>
<button type="button" class="ux-social-btn" aria-label="C"><svg viewBox="0 0 24 24"><path d="M12 4l8 8-8 8-8-8 8-8z"/></svg></button>
</div>
<div class="ux-more">
<button type="button" class="ux-more-btn"><span data-i18n="cta.more">Open</span></button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section section--reveal" aria-labelledby="orbit-title">
<div class="section-head">
<h2 id="orbit-title" data-i18n="sec.orbit">Spotlight deck</h2>
<p data-i18n="sec.orbit.sub">Four panels in a stable horizontal stage — arrows, dots, keyboard, and swipe.</p>
</div>
<div
class="stage-wrap"
data-carousel
role="region"
aria-roledescription="carousel"
aria-labelledby="orbit-title"
tabindex="0"
>
<span class="stage-live sr-only" data-carousel-live aria-live="polite"></span>
<div class="stage-shell">
<button type="button" class="stage-fab stage-fab--prev" data-carousel-prev aria-controls="stage-track">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
</button>
<div class="stage-viewport" data-carousel-viewport dir="ltr">
<div class="stage-track" id="stage-track" data-carousel-track>
<article class="stage-card stage-card--a" data-carousel-panel>
<div class="stage-card__inner">
<div class="stage-card__body">
<span class="stage-card__tag">01</span>
<h3 data-i18n="carousel.1t">Signal</h3>
<p data-i18n="carousel.1d">Latency budgets and live traces.</p>
</div>
<div class="stage-card__actions">
<div class="ux-social">
<button type="button" class="ux-social-btn" aria-label="a"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/></svg></button>
<button type="button" class="ux-social-btn" aria-label="b"><svg viewBox="0 0 24 24"><rect x="7" y="7" width="10" height="10" rx="2"/></svg></button>
</div>
<button type="button" class="ux-more-btn"><span data-i18n="cta.more">Open</span></button>
</div>
</div>
</article>
<article class="stage-card stage-card--b" data-carousel-panel>
<div class="stage-card__inner">
<div class="stage-card__body">
<span class="stage-card__tag">02</span>
<h3 data-i18n="carousel.2t">Mesh</h3>
<p data-i18n="carousel.2d">Distributed nodes with health rings.</p>
</div>
<div class="stage-card__actions">
<div class="ux-social">
<button type="button" class="ux-social-btn" aria-label="a"><svg viewBox="0 0 24 24"><path d="M12 5l7 12H5z"/></svg></button>
<button type="button" class="ux-social-btn" aria-label="b"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6"/></svg></button>
</div>
<button type="button" class="ux-more-btn"><span data-i18n="cta.more">Open</span></button>
</div>
</div>
</article>
<article class="stage-card stage-card--c" data-carousel-panel>
<div class="stage-card__inner">
<div class="stage-card__body">
<span class="stage-card__tag">03</span>
<h3 data-i18n="carousel.3t">Vault</h3>
<p data-i18n="carousel.3d">Encrypted payloads at rest.</p>
</div>
<div class="stage-card__actions">
<div class="ux-social">
<button type="button" class="ux-social-btn" aria-label="a"><svg viewBox="0 0 24 24"><path d="M12 2l8 8-8 8-8-8 8-8z"/></svg></button>
<button type="button" class="ux-social-btn" aria-label="b"><svg viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="3"/></svg></button>
</div>
<button type="button" class="ux-more-btn"><span data-i18n="cta.more">Open</span></button>
</div>
</div>
</article>
<article class="stage-card stage-card--d" data-carousel-panel>
<div class="stage-card__inner">
<div class="stage-card__body">
<span class="stage-card__tag">04</span>
<h3 data-i18n="carousel.4t">Pulse</h3>
<p data-i18n="carousel.4d">Realtime fan-out to edge regions.</p>
</div>
<div class="stage-card__actions">
<div class="ux-social">
<button type="button" class="ux-social-btn" aria-label="a"><svg viewBox="0 0 24 24"><path d="M8 5v14l10-7-10-7z"/></svg></button>
<button type="button" class="ux-social-btn" aria-label="b"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="7"/></svg></button>
</div>
<button type="button" class="ux-more-btn"><span data-i18n="cta.more">Open</span></button>
</div>
</div>
</article>
</div>
</div>
<button type="button" class="stage-fab stage-fab--next" data-carousel-next aria-controls="stage-track">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"/></svg>
</button>
</div>
<div class="stage-dots" data-carousel-dots role="group" aria-label="Slide indicators">
<button type="button" class="is-active" aria-label="Slide 1" aria-selected="true"></button>
<button type="button" aria-label="Slide 2" aria-selected="false"></button>
<button type="button" aria-label="Slide 3" aria-selected="false"></button>
<button type="button" aria-label="Slide 4" aria-selected="false"></button>
</div>
</div>
</section>
</main>
<footer class="site-foot">
<p data-i18n="footer.note">Built with semantic HTML & CSS 3D transforms.</p>
</footer>
<script src="js/app.js"></script>
</body>
</html>
<script src="./script.js"></script>
</body>
</html>