The Web Can Do THAT?! — 52+ Browser Features Demo

01 — Scroll-Driven Animations

Animations That Respond to Your Scroll

No JavaScript. No Intersection Observer. Pure CSS animation-timeline: view() ties any animation directly to scroll position. Every element on this page uses it.

This section animated in as you scrolled — that's scroll-driven animations. Every .reveal element on this page fades and slides in using only CSS.

      
@keyframes reveal {
  from { opacity: 0; translate: 0 40px; }
  to   { opacity: 1; translate: 0 0; }
}
.reveal {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}
      
    

02 — @property Houdini

Animate the Un-animatable

@property registers typed CSS custom properties, unlocking smooth gradient transitions, color interpolation, and morphing shapes.

      
@property --gradient-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.blob {
  background: conic-gradient(from var(--gradient-angle), #8b5cf6, #06b6d4, #8b5cf6);
  animation: spin 3s linear infinite;
}
@keyframes spin { to { --gradient-angle: 360deg; } }
      
    

03 — OKLCH Colors

Colors Your Monitor Only Dreamed Of

OKLCH is perceptually uniform — equal lightness steps look equal. On P3 displays, these go beyond sRGB.

oklch(0.65 0.28 290)

oklch(0.75 0.18 195)

oklch(0.70 0.22 340)

oklch(0.80 0.20 145)

oklch(0.72 0.25 30)

oklch(0.68 0.30 60)

      
/* Perceptually uniform — equal L steps look equal */
.card {
  background: oklch(0.65 0.28 290);
  border-color: color-mix(in oklch, currentColor 20%, transparent);
}
@media (color-gamut: p3) {
  .card { background: oklch(0.65 0.35 290); }
}
      
    

04 — Container Queries

Components That Know Their Own Size

@container queries let components respond to their container — not the viewport. True component-driven responsive design.

📦

Resize my container

Drag the bottom-right corner. I respond to my container's width, not the viewport.

      
.container { container-type: inline-size; }

@container (min-width: 400px) {
  .card {
    grid-template-columns: auto 1fr;
    text-align: left;
  }
}
      
    

05 — Popover API

Native Popovers. Zero JavaScript.

The popover attribute + @starting-style gives entry/exit animations, light-dismiss, focus trapping, and top-layer rendering — built into HTML.

      
<!-- HTML only — no JS -->
<button popovertarget="my-pop">Open</button>
<div id="my-pop" popover>Content</div>

[popover] {
  transition: opacity 0.3s, display 0.3s allow-discrete;
  @starting-style { opacity: 0; }
}
      
    

06 — :has() Parent Selector

CSS Finally Has a Parent Selector

:has() selects elements based on descendants. Check the boxes — cards AND status text react with pure CSS.

Design Engineering AI/ML Strategy

Select a service above

      
.has-card:has(input:checked) {
  border-color: var(--accent-violet);
  background: oklch(0.25 0.05 290);
}
.has-demo:has(input:checked) .has-status {
  color: var(--accent-cyan);
}
      
    

07 — View Transitions API

Cinematic Page Transitions — Native

document.startViewTransition() morphs elements between states with crossfade and position animations. No animation library needed.

Violet

Cyan

Magenta

      
document.startViewTransition(() => {
  gallery.hidden = true;
  detail.hidden = false;
  detailContent.style.background = color;
});
/* CSS: ::view-transition-old/new(root) */
      
    

08 — CSS Anchor Positioning

Position Anything Relative to Anything

anchor-name + position-anchor lets you position elements relative to other elements — tooltips, dropdowns, annotations — without JavaScript positioning.

      
.anchor  { anchor-name: --my-anchor; }
.tooltip {
  position: fixed;
  position-anchor: --my-anchor;
  inset-area: top;
  margin-bottom: 8px;
}
      
    

09 — light-dark()

One Function, Two Themes

light-dark() picks the right color based on the element's color-scheme. One line replaces entire theme systems.

Toggle theme

Themed Card

This card uses light-dark() for all its colors. Toggle the switch above.

      
.card {
  color-scheme: light dark;
  background: light-dark(#f5f5f5, #1a1a1a);
  color: light-dark(#111, #eee);
  border-color: light-dark(#ddd, #333);
}
      
    

10 — linear() Easing

Spring Physics in Pure CSS

linear() defines custom easing curves with unlimited stops. Create spring bounces, elastic snaps, and physics-based motion — no JavaScript.

ease

spring

      
--spring: linear(
  0, 0.006, 0.025, 0.058, 0.104, 0.163, 0.233, 0.314,
  0.402, 0.496, 0.591, 0.686, 0.775, 0.854, 0.924,
  0.982, 1.028, 1.060, 1.078, 1.084, 1.078, 1.063,
  1.041, 1.015, 0.988, 0.963, 0.942, 0.927, 0.918,
  0.916, 0.920, 0.929, 0.942, 0.958, 0.975, 0.992,
  1.007, 1.019, 1.025, 1.024, 1.018, 1.007, 0.995,
  0.984, 0.977, 0.974, 0.976, 0.982, 0.991, 1
);
      
    

11 — CSS @scope

Style Boundaries Without Shadow DOM

@scope (.outer) to (.inner) creates a donut-shaped styling zone. Styles apply to the outer but stop before the inner. No leaking.

I'm styled by @scope (blue border)

I'm INSIDE the boundary — @scope styles don't reach me

      
@scope (.scope-outer) to (.scope-inner) {
  p {
    border: 2px solid var(--accent-cyan);
    padding: 1rem;
  }
}
      
    

12 — Exclusive Accordion

One-at-a-Time Accordions. Zero JavaScript.

Add name="group" to <details> elements. The browser auto-closes siblings when one opens. That's it. No JS.

What makes this different from a regular accordion?

The name attribute on <details> creates exclusive behavior natively. Opening one closes the others. No JavaScript. No ARIA hacks. Just HTML.

Which browsers support this?

Chrome 120+, Safari 17.2+, Firefox 130+. Progressive enhancement — older browsers just show non-exclusive accordions.

Can I animate the open/close?

Yes! Use the [open] selector combined with CSS transitions. The interpolate-size: allow-keywords feature (see below) enables smooth height transitions from 0 to auto.

Does this replace my accordion library?

For most use cases, yes. You get keyboard navigation, screen reader support, and exclusive behavior for free. Ship less JavaScript.

      
<details name="faq" open>
  <summary>Question one</summary>
  <div><p>Answer</p></div>
</details>
<details name="faq">
  <summary>Question two</summary>
  <div><p>Answer</p></div>
</details>
      
    

13 — Dialog Element

The Modal HTML Always Needed

<dialog> with .showModal() gives you top-layer rendering, focus trapping, Escape to close, and ::backdrop — plus smooth animations via @starting-style.

      
dialog.showModal();

dialog[open] {
  opacity: 1; scale: 1;
  @starting-style { opacity: 0; scale: 0.9; }
}
dialog::backdrop {
  background: oklch(0 0 0 / 0.5);
  backdrop-filter: blur(4px);
}
      
    

14 — field-sizing

Inputs That Grow With Your Content

field-sizing: content makes inputs and textareas auto-resize as you type. One CSS property replaces JavaScript auto-resize hacks.

With field-sizing: content

Without (fixed size)

      
textarea {
  field-sizing: content;
  min-height: 3lh;   /* minimum 3 lines */
  max-height: 10lh;  /* cap at 10 lines */
}
      
    

15 — CSS offset-path

Elements That Follow Any Path

offset-path moves elements along SVG paths, circles, or any shape. Combine with scroll-driven timelines for scroll-controlled motion.

🌍

🚀

🛸

      
.orbit-dot {
  offset-path: circle(100px);
  animation: orbit 4s linear infinite;
}
@keyframes orbit {
  to { offset-distance: 100%; }
}
      
    

16 — clip-path Animations

Shapes That Morph on Command

clip-path transitions between shapes smoothly. Circles, polygons, insets — all animatable for dramatic reveal effects.

circle()

polygon()

inset()

ellipse()

      
.clip-item {
  clip-path: circle(0%);
  transition: clip-path 0.6s ease;
}
.clip-item:hover {
  clip-path: circle(75%);
}
      
    

17 — Relative Color Syntax

Generate Entire Palettes From One Color

oklch(from var(--base) ...) creates tints, shades, and variations by manipulating components of an existing color. One variable, infinite palette.

95% L

85% L

75% L

Base

45% L

30% L

15% L

      
:root { --base: oklch(0.65 0.28 290); }

.tint  { background: oklch(from var(--base) 0.95 0.05 h); }
.base  { background: oklch(from var(--base) l c h); }
.shade { background: oklch(from var(--base) 0.25 0.1 h); }

18 — interpolate-size

Finally: Transition Height to Auto

interpolate-size: allow-keywords lets browsers transition between 0 and auto (or any keyword size). The feature CSS developers have wanted for 20 years.

This content smoothly transitions between height: 0 and height: auto. No JavaScript height calculation. No max-height hack. Just CSS.

The interpolate-size: allow-keywords property on the container enables keyword interpolation for all descendants.

      
.container { interpolate-size: allow-keywords; }

.content {
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease;
}
.content.open { height: auto; }
      
    

19 — Individual Transform Properties

Transform Properties, Unchained

translate, rotate, and scale are now independent CSS properties. Animate each on its own timeline — impossible with the old transform shorthand.

translate

rotate

scale

      
.box {
  translate: 0 0;
  rotate: 0deg;
  scale: 1;
  transition: translate 0.4s, rotate 0.6s, scale 0.3s;
}
.box:hover {
  translate: 20px -10px;
  rotate: 15deg;
  scale: 1.1;
}
      
    

20 — accent-color

Theme Every Native Control With One Line

accent-color styles checkboxes, radios, range sliders, and progress bars. One property to rule all native form controls.

Pick accent color:

Checkbox Radio A Radio B Range: Progress: 72%

      
.form {
  accent-color: var(--ac-color);
}
/* That's it. Checkboxes, radios, ranges, progress bars — all themed. */

21 — aspect-ratio

Perfect Proportions Without Padding Hacks

aspect-ratio maintains element proportions natively. No more padding-bottom: 56.25% for 16:9. Just write the ratio.

      
.video { aspect-ratio: 16 / 9; }
.square { aspect-ratio: 1; }
.cinema { aspect-ratio: 21 / 9; }
/* Replaces the old padding-bottom: 56.25% hack */

22 — CSS Logical Properties

CSS That Speaks Every Language

Logical properties like margin-inline, padding-block, and inset-inline adapt to text direction automatically. Write once, support LTR and RTL.

Logical Properties Card

My border-inline-start, margin-inline, and padding-block flip automatically when text direction changes.

      
.card {
  margin-inline: auto;
  padding-block: 1.5rem;
  padding-inline: 2rem;
  border-inline-start: 4px solid var(--accent-violet);
}
      
    

23 — overscroll-behavior

Scroll Containers That Don't Hijack the Page

overscroll-behavior: contain prevents scroll chaining. When you hit the end of a scrollable element, the page stays put.

overscroll-behavior: contain

Scroll to the end — the page won't scroll.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

More content to enable scrolling within this container.

Even more content to make the scrollbar appear.

Keep scrolling down to test the behavior.

You've reached the end. Page didn't move!

Default behavior

Scroll to the end — the page WILL scroll.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

More content to enable scrolling within this container.

Even more content to make the scrollbar appear.

Keep scrolling down to test the behavior.

Notice the page scrolls when you hit the end.

      
.scroll-container {
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Prevents scroll from chaining to the parent/page */
      
    

24 — CSS Nesting

Native Nesting — No Preprocessor Needed

Write &:hover, & .child, and nested rules directly in your stylesheets. Sass-like syntax is now native CSS.

This entire page's stylesheet uses native CSS nesting. No Sass. No PostCSS. Just the browser's built-in CSS parser.

      
.card {
  background: var(--surface);
  border: 1px solid var(--border);

  &:hover {
    border-color: var(--accent-violet);
  }
  & .title {
    font-weight: 700;
  }
  @media (width < 600px) {
    padding: 1rem;
  }
}
      
    

25 — @layer Cascade Layers

End the Specificity Wars

@layer organizes styles into explicit priority tiers. Reset, base, components, utilities — no more !important battles.

This page declares its layers upfront: @layer reset, base, components, animations, utilities;. Styles in later layers always win over earlier ones, regardless of selector specificity.

      
@layer reset, base, components, animations, utilities;

@layer base {
  h2 { font-size: 2rem; }
}
@layer utilities {
  .text-sm { font-size: 0.875rem; } /* wins over base */
}
      
    

26 — @starting-style

Entry Animations Without Keyframes

@starting-style defines where elements start before their first frame. Combined with allow-discrete, even display: none → block can animate.

I animated in! Click the button to toggle me.

      
.box {
  transition: opacity 0.5s, display 0.5s allow-discrete;
}
.box[hidden] { opacity: 0; display: none; }
.box {
  @starting-style { opacity: 0; }
}
      
    

27 — color-mix()

Blend Colors at the CSS Level

color-mix() creates tints, shades, and overlays by mixing two colors in any color space. Design tokens, computed.

100%

75/25

50/50

25/75

100%

      
.blend {
  background: color-mix(
    in oklch,
    var(--accent-violet) 50%,
    var(--accent-cyan)
  );
}
      
    

28 — text-wrap: balance / pretty

Typography That Balances Itself

balance evens out heading lines. pretty avoids orphaned words. Browser-native typographic intelligence.

This heading demonstrates text-wrap balance to create even line lengths

text-wrap: balance

This heading has no text-wrap balance applied so the last line may be very short

default

      
h1, h2, h3 { text-wrap: balance; }
p          { text-wrap: pretty; }
/* balance = even line lengths, pretty = no orphans */

29 — Web Audio API

Synthesize Sound in Real Time

Generate, process, and visualize sound entirely in the browser. No audio files — just oscillators, filters, and gain nodes creating music from math.

Click to synthesize a chord with real-time frequency visualization

      
const ctx = new AudioContext();
const osc = ctx.createOscillator();
osc.type = 'sine';
osc.frequency.value = 440;
osc.connect(ctx.destination);
osc.start();
      
    

30 — CSS 3D Transforms

Interactive 3D Without a Canvas

CSS perspective + preserve-3d + mouse tracking creates convincing 3D. No WebGL needed.

Move Your Cursor

This card tracks your mouse with CSS perspective and rotateX/Y. The light reflection follows via custom properties.

      
.scene { perspective: 800px; }
.card  {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
}
/* JS: set --rx and --ry on mousemove */
      
    

31 — Canvas + OffscreenCanvas

Offload Rendering to a Worker

OffscreenCanvas moves canvas rendering off the main thread. 200 particles at 60fps while the UI stays perfectly responsive.

0 FPS

      
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('particle-worker.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);
/* Main thread stays free — zero jank */

32 — Object.groupBy

Group Arrays Without Reduce Boilerplate

Object.groupBy() replaces the old reduce accumulator pattern. Group by any key in one clean call.

      
const features = [
  { name: 'OKLCH', type: 'css' },
  { name: 'groupBy', type: 'js' },
];
const grouped = Object.groupBy(features, f => f.type);
// { css: [...], js: [...] }
      
    

33 — Set Methods

Set Theory, Built In

union(), intersection(), difference(), and symmetricDifference() — mathematical set operations, native on every Set.

Set A

CSS, HTML, JS, Rust

Set B

JS, Python, Rust, Go

Click an operation above

      
const a = new Set(['CSS', 'HTML', 'JS', 'Rust']);
const b = new Set(['JS', 'Python', 'Rust', 'Go']);

a.union(b);              // CSS, HTML, JS, Rust, Python, Go
a.intersection(b);       // JS, Rust
a.difference(b);         // CSS, HTML
a.symmetricDifference(b); // CSS, HTML, Python, Go
      
    

34 — Promise.withResolvers

Promises Without the Nesting

Promise.withResolvers() returns {promise, resolve, reject} directly. No more wrapping everything in new Promise(...).

Click to start

      
const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => resolve('done!'), 5000);

await promise; // 'done!'
// No new Promise((resolve, reject) => { ... }) wrapper needed

35 — Web Components

Build Your Own HTML Elements

customElements.define() registers new HTML tags with Shadow DOM encapsulation. Reusable, framework-free components.

🧩 I'm a Custom Element This entire card is a <feature-card> Web Component with Shadow DOM encapsulation. My styles can't leak out, and page styles can't leak in.

🔒 Encapsulated Styles Each instance has its own Shadow DOM. Try inspecting me in DevTools — you'll see the shadow root.

      
class FeatureCard extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `<slot name="icon"></slot> ...`;
  }
}
customElements.define('feature-card', FeatureCard);
      
    

36 — RegExp v Flag

Unicode-Aware Pattern Matching

The v flag enables Unicode set notation. Match emoji, scripts, and Unicode properties with set operations like subtraction and intersection.

/v

Test: Hello 🌍 World 🚀 CSS 🎨 JS ⚡ Code 🧬 Ship 🚢

      
const emoji = /[\p{Emoji_Presentation}]/v;
const text = 'Hello 🌍 World 🚀';
text.match(/[\p{Emoji_Presentation}]/gv);
// ['🌍', '🚀']

37 — content-visibility

Skip Rendering What You Can't See

content-visibility: auto tells the browser to skip layout and paint for off-screen elements. This very page uses it on every section.

Every section on this page uses content-visibility: auto with contain-intrinsic-size. Sections below the viewport are skipped during layout — dramatically reducing initial render time on a page this large.

Sections on this page: 52

Rendered at load: ~3

Render savings: ~93%

      
.section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}
/* Browser skips layout/paint for off-screen sections */
      
    

38 — Scroll Snap

Precise Scroll Positions, Native

scroll-snap-type and scroll-snap-align create precise scroll-to-point behavior. Carousels, galleries, and section layouts.

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

      
.gallery {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
}
.slide {
  scroll-snap-align: center;
}
      
    

39 — Dynamic Viewport Units

Viewport Units That Actually Work on Mobile

dvh adapts to the dynamic viewport (browser chrome). svh is the smallest possible. lvh is the largest. No more broken 100vh on phones.

100lvh

100dvh

100svh

On desktop these are equal. On mobile, dvh changes as the URL bar shows/hides, svh is the smallest viewport, and lvh is the largest.

      
.hero {
  min-height: 100dvh; /* dynamic — adapts to browser chrome */
}
.modal {
  max-height: 100svh; /* smallest — never clips under UI */
}
      
    

40 — backdrop-filter

Frosted Glass, Native

backdrop-filter: blur() saturate() creates glassmorphism effects. Every card on this page uses it.

Glassmorphism

backdrop-filter: blur(20px) saturate(1.5)

Layer Two

Stacked glass effects

      
.glass {
  background: oklch(0.15 0.02 280 / 0.6);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid oklch(1 0 0 / 0.1);
}
      
    

41 — Speculation Rules

Prerender Pages Before the Click

<script type="speculationrules"> tells the browser to prefetch or prerender linked pages. Near-instant navigation.

This page includes speculation rules that prerender the Champlin Enterprises homepage. Hover the link below — the browser may have already loaded it:

champlinenterprises.com prerendered

      
<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "href_matches": "https://champlinenterprises.com"
    }
  }]
}
</script>
      
    

42 — <search> Element

Semantic Search — The HTML Element

The <search> element marks search functionality semantically. Screen readers and browsers understand it's a search landmark.

The search bar at the top of this page uses the native <search> HTML element. It's a semantic landmark that assistive technologies recognize automatically.

Combined with field-sizing: content, the input auto-resizes as you type.

      
<search class="feature-search">
  <label for="search" class="sr-only">Search</label>
  <input type="search" id="search"
    style="field-sizing: content;">
</search>
      
    

43 — CSS Subgrid

Nested Grids That Actually Align

grid-template-rows: subgrid lets child grids inherit track sizing from the parent. Headers, bodies, and footers across cards finally line up.

Short Title

Brief description.

A Much Longer Card Title That Wraps

This description is intentionally longer to show how subgrid keeps all three rows aligned across sibling cards.

Medium Title

All footers are aligned.

      
.parent { display: grid; grid-template-rows: repeat(3, auto); }
.card { grid-row: span 3; grid-template-rows: subgrid; }

44 — CSS round() / mod() Math

Pixel-Perfect Math in Your Stylesheet

round() snaps values to intervals. mod() returns remainders. Build snap-to-grid layouts and rhythmic spacing without JavaScript.

round(nearest, 33.3%, 25%) = 25%

round(up, 33.3%, 25%) = 50%

round(down, 77%, 25%) = 75%

      
.cell { width: round(nearest, 33.3%, 25%); }
.alt  { margin: mod(100px, 30px); /* = 10px */ }

45 — Mesh Gradients

Rich, Organic Backgrounds — Pure CSS

Layer multiple radial-gradient() ellipses with OKLCH colors to simulate mesh gradients. The hero background on this page is a mesh gradient.

Aurora

Nebula

Sunset

      
.mesh {
  background:
    radial-gradient(ellipse at 20% 30%, oklch(0.5 0.25 290 / 0.7), transparent 60%),
    radial-gradient(ellipse at 80% 70%, oklch(0.6 0.2 195 / 0.6), transparent 55%),
    radial-gradient(ellipse at 50% 50%, oklch(0.4 0.2 340 / 0.5), transparent 50%);
}
      
    

46 — CSS Paint API

Custom Painted Backgrounds From JavaScript

CSS.paintWorklet.addModule() lets you draw custom backgrounds with a Canvas-like API. Dynamic, resolution-independent, and GPU-accelerated.

This box uses a Houdini Paint worklet to draw a custom dot grid pattern. Resize your browser to see it redraw.

      
CSS.paintWorklet.addModule('dotgrid.js');
.box { background-image: paint(dotgrid); }

47 — Intersection Observer v2

Know When Elements Are Truly Visible

v2 adds trackVisibility and isVisible to detect actual visibility (not just intersection), accounting for opacity, transforms, and occlusion.

Watching...

Intersection events will appear here as you scroll.

      
new IntersectionObserver(cb, {
  trackVisibility: true,
  delay: 100
});
// entry.isVisible — true if truly visible to user
      
    

48 — Clipboard API

Programmatic Copy & Paste

navigator.clipboard.writeText() and readText() give async, promise-based clipboard access. Every "Copy" button on this page uses it.

Try copying and pasting

      
await navigator.clipboard.writeText('Hello');
const text = await navigator.clipboard.readText();

49 — Magnetic Buttons

Buttons That Pull Toward Your Cursor

CSS custom properties + mouse tracking create a magnetic pull effect. The button subtly follows your cursor within its hit area.

      
btn.addEventListener('mousemove', (e) => {
  const rect = btn.getBoundingClientRect();
  const dx = e.clientX - rect.left - rect.width / 2;
  btn.style.translate = `${dx * 0.4}px ${dy * 0.4}px`;
});
      
    

50 — Particle Cursor Trail

Sparkles That Follow Your Mouse

A lightweight canvas overlay spawns particles at the cursor position. They fade and fall with simulated gravity.

Move your mouse here

      
function spawnParticle(x, y) {
  particles.push({ x, y,
    vx: (Math.random() - 0.5) * 3,
    vy: -Math.random() * 2,
    life: 1, hue: Math.random() * 360
  });
}
      
    

51 — Sound on Scroll

Subtle Audio Feedback as You Scroll

Web Audio API + Intersection Observer plays soft tones as sections enter view. Opt-in only.

Sound is off. Enable it, then scroll through sections to hear tones.

      
const osc = ctx.createOscillator();
osc.frequency.value = 220 + index * 40;
osc.start(); osc.stop(ctx.currentTime + 0.15);

52 — Easter Egg

Hidden Surprises Reward the Curious

The Konami Code (↑ ↑ ↓ ↓ ← → ← → B A) triggers a hidden animation.

↑↑↓↓←→←→BA

Try typing the Konami Code on your keyboard...

      
const konami = ['ArrowUp','ArrowUp','ArrowDown','ArrowDown',
  'ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b','a'];
let pos = 0;
document.addEventListener('keydown', (e) => {
  pos = e.key === konami[pos] ? pos + 1 : 0;
  if (pos === konami.length) activateEasterEgg();
});
      
    