Projects & Case Studies

A small, predictable control layer for React Three Fiber, designed to make interactive 3D scenes easier to structure, test, and maintain.

r3f-interactive-flow focuses on phase-based interaction control for React Three Fiber scenes. Rather than trying to become a full animation framework, it provides a small and readable API for managing scene phases, transitions, and input behavior. The project is also being developed with AI-friendly documentation, predictable TypeScript types, and copy-paste-friendly examples so both humans and coding agents can understand and extend it safely.

A local-first virtual avatar starter kit focused on privacy, native performance, and a clear separation between tracking, desktop UI, and web preview layers.

Local Virtual Kit is a local-first VTuber and virtual avatar starter kit. The project is designed around strong privacy boundaries: camera frames stay local, and tracking/runtime responsibilities are separated from the Electron desktop shell and Web Preview. The architecture uses a stable MotionFrame contract so each layer can evolve without casually breaking the others. The current development focus is shifting from documentation and safety gates toward visible implementation work.

An open-source collection of engineering-focused AI agent templates, workflows, and prompt guidelines for practical software development.

engineering-agents is an open-source template library for engineering-focused AI agents and workflows. The project starts with frontend, design, review, and Codex workflow agents, then organizes reusable prompts, PR templates, agent authoring guidance, roadmap guidance, and public OSS hygiene rules. The goal is not to cover every possible role at once, but to create a stable initial agent template library that can be safely reused in real development workflows.

A motion-driven personal portfolio built with Next.js, Framer Motion, React Three Fiber, and particle-based interaction design.

This portfolio is designed as an interactive entry point rather than a traditional static landing page. The top page focuses on visual presentation, motion, and creative frontend expression, while the supporting pages provide readable project, lab, blog, and about content.

A developer-focused proof-of-work concept for recording development traces, progress, and technical decisions.

Traceraft is a product concept for developers who want to keep a clear record of their engineering process. The idea focuses on turning everyday development activity into structured, shareable evidence of technical work.

A handmade particle morph system that transforms skill icons into interactive visual experiences using React Three Fiber.

The skill section uses React Three Fiber to create an interactive particle stage. Instead of only listing technologies as text, each selected skill can be represented through particle motion and handmade icon point generation.

A lightweight blog system using Supabase, server-side data fetching, and Cloudflare R2 assets.

The blog system is designed to keep the public portfolio lightweight while still allowing structured content, image assets, and detailed technical writing. Supabase is used for data storage, while Cloudflare R2 handles image assets.

A replacement plan for a long-running LINE Messaging API and GAS automation app.

This project explores how an existing LINE Messaging API and Google Apps Script automation app could be redesigned with a more modern architecture. The original app has continued running for years, making it a useful case for thinking about replacement strategy.