Null;Variant

90s-style retro web components demo, implemented with modern tech in an 'unnecessarily modern' way

Dark mode / Multi-language / Responsive

Access Counter

Cloudflare KV + Web Animations API + Intersection Observer

variant="classic"

You are visitor

!

variant="lcd"

You are visitor

!

variant="neon"

You are visitor

!

Hit a round number (100, 1000...) or repdigit (111, 222...) to see celebration effects

Under Construction Component

SVG Animation + Container Queries + Intl API

variant="classic"

🚧 Under Construction 🚧

This page is currently under construction

42% Complete

Estimated completion:

variant="modern"

🚧 Under Construction 🚧

This page is currently under construction

42% Complete

Estimated completion:

LED balloon lights appear in dark mode

Respects prefers-reduced-motion for accessibility

Rainbow Gradient Text

CSS linear-gradient + background-clip: text + @keyframes

variant="classic"

Welcome to my homepage!

variant="neon" animated

Neon Rainbow Effect

variant="pastel"

Pastel Rainbow Effect

Rainbow text reminiscent of 90s GeoCities

NEW! Badge

CSS Animations + prefers-reduced-motion support

variant="classic" NEW
variant="web20" NEW
variant="modern" NEW

Blinking NEW! icon with 3 variants (classic/modern/pixel)

Date & Time Display

Intl.DateTimeFormat + Custom Elements API

DateDisplay variant="classic"Today is Wednesday, January 14, 2026
DateDisplay variant="web20"Today is Wednesday, January 14, 2026
DateDisplay variant="modern"Today is Wednesday, January 14, 2026
StayTimer variant="classic"You've been here for 00 : 00
StayTimer variant="web20"You've been here for 00 : 00
StayTimer variant="modern"You've been here for 00 : 00

90s-style date display and stay timer

Bookmark Prompt

Clipboard API + navigator.platform detection

variant="classic"
variant="web20"
variant="modern"

OS detection for Ctrl/⌘, click to copy URL

Web Ring

CSS Animations + multiple variants

variant="classic"
variant="web20"
variant="modern"

Recreation of 90s web ring navigation

Material Credits

Modern interpretation (AI generation service links)

variant="classic"
Material Credits

Images on this site were generated by AI

※Please check each service's terms of use

AI GENERATED
variant="web20"
Material Credits

Images on this site were generated by AI

※Please check each service's terms of use

AI GENERATED
variant="modern"
Material Credits

Images on this site were generated by AI

※Please check each service's terms of use

AI GENERATED

Modern reinterpretation of 90s 'material provider links'

BGM Player

HTMLAudioElement + Web Audio API + Custom Elements API

variant="classic"
♪ BGM Player ♪
8-Bit Dreams Pixel Composer
0:00 / 0:00
BGM OFF
variant="web20"
♪ BGM Player ♪
Retro Wave Demo Artist
0:00 / 0:00
BGM OFF
variant="modern"
♪ BGM Player ♪
Midnight Vibes Modern Beats
0:00 / 0:00
BGM OFF

90s MIDI-style player (no autoplay)

Cursor Trail

requestAnimationFrame + CSS transforms + throttle optimization

Move your mouse around ★

shape: star / sparkle / heart / circle

That nostalgic effect where stars follow your cursor

Snow Effect

CSS Animations + will-change optimization + prefers-reduced-motion support

Snow is falling on the screen ❄

Currently 30 snowflakes animating

Snow falling year-round, a classic 90s homepage tradition

Tech Stack

Astro TypeScript Tailwind CSS Cloudflare GitHub Cursor

APIs & Web Technologies

  • Astro (SSR)
  • Cloudflare KV
  • Custom Elements API
  • Web Animations API
  • Intersection Observer
  • Intl API (i18n)
  • Intl.DateTimeFormat
  • Intl.NumberFormat
  • Intl.RelativeTimeFormat
  • Container Queries
  • CSS drop-shadow
  • prefers-reduced-motion
  • crypto.randomUUID()
  • hreflang
  • Performance API
  • Page Visibility API
  • Clipboard API
  • background-clip: text
  • HTMLAudioElement
  • requestAnimationFrame