Null;Variant

最新技術で「無駄にモダン」に実装した90年代風Webレトロコンポーネントのデモページ

ダークモード / 多言語 / レスポンシブ対応

アクセスカウンター

Cloudflare KV + Web Animations API + Intersection Observer

variant="classic"

あなたは

人目のお客様です！
variant="lcd"

あなたは

人目のお客様です！
variant="neon"

あなたは

人目のお客様です！

キリ番（100, 1000...）やゾロ目（111, 222...）を踏むとお祝い演出が出ます

工事中コンポーネント

SVG Animation + Container Queries + Intl API

variant="classic"

🚧 工事中 🚧

このページは現在工事中です

42% 完成

完成予定:

variant="modern"

🚧 工事中 🚧

このページは現在工事中です

42% 完成

完成予定:

ダークモードではLEDバルーンライトが出現します

prefers-reduced-motion対応でアニメーション無効化可能

虹色グラデーション文字

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

variant="classic"

Welcome to my homepage!

variant="neon" animated

Neon Rainbow Effect

variant="pastel"

Pastel Rainbow Effect

90年代のジオシティーズを彷彿とさせる虹色文字

NEW!バッジ

CSS Animations + prefers-reduced-motion対応

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

点滅するNEW!アイコン。3つのバリアント（classic/modern/pixel）

日付・時刻表示

Intl.DateTimeFormat + Custom Elements API

DateDisplay variant="classic" 今日は 2025年12月6日土曜日 です
DateDisplay variant="web20" 今日は 2025年12月6日土曜日 です
DateDisplay variant="modern" 今日は 2025年12月6日土曜日 です
StayTimer variant="classic" あなたは 00 : 00 滞在中
StayTimer variant="web20" あなたは 00 : 00 滞在中
StayTimer variant="modern" あなたは 00 : 00 滞在中

90年代風日付表示と滞在時間カウンター

ブックマーク推奨

Clipboard API + navigator.platform判定

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

OS判定でCtrl/⌘を切り替え、クリックでURLコピー

Webリング

CSS Animations + 複数バリアント

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

90年代のWebリングナビゲーションを再現

素材クレジット

現代的解釈（AI生成サービスへのリンク）

variant="classic"
素材提供

このサイトの画像はAIに生成してもらいました

※各サービスの利用規約をご確認ください

AI GENERATED
variant="web20"
素材提供

このサイトの画像はAIに生成してもらいました

※各サービスの利用規約をご確認ください

AI GENERATED
variant="modern"
素材提供

このサイトの画像はAIに生成してもらいました

※各サービスの利用規約をご確認ください

AI GENERATED

90年代の「素材屋さんリンク」を現代的に再解釈

BGMプレイヤー

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

90年代風MIDI再生風プレイヤー（自動再生はしません）

カーソルトレイル

requestAnimationFrame + CSS transforms + throttle最適化

マウスを動かしてみてください ★

shape: star / sparkle / heart / circle

マウスを動かすと★がついてくる、あの懐かしいエフェクト

雪エフェクト

CSS Animations + will-change最適化 + prefers-reduced-motion対応

画面に雪が降っています ❄

現在30個の雪片がアニメーション中

季節問わず降り続ける雪、90年代ホームページの風物詩

使用技術

Astro TypeScript Tailwind CSS Cloudflare GitHub Cursor

APIs & Web技術

  • 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