Technology

The technology itselfbecomes this page's presentation

Instead of a list of icons and captions, this page uses each technology to present itself. The Three.js, GSAP, and Canvas cards each carry a tiny visual drawn with that exact technology.

Technology stack

• React / Next.js

  Every page built on the App Router

• TypeScript

  Fully typed across the codebase

• Framer Motion

  Micro-interactions throughout the UI

• GSAP

  Character-level scroll-triggered animation

• Canvas

  Interactive demo on the Product page

• Three.js

  3D object in the top hero

• API連携

  Fetch and error handling against a dummy API

• CMS想定設計

  Schema modeled as a type + async getter

• ダークモード

  Dark by default, light mode available

• 多言語対応

  Japanese and English via next-intl

• レスポンシブ

  3D swaps for a lightweight alternative on mobile

• SEO

  Dynamic OGP images per locale

• アクセシビリティ

  Keyboard operable, respects reduced motion

• パフォーマンス最適化

  Lazy-loaded 3D scene