AnyConcept

Tech Stack

Role

Design + Full-stack Development

Team Size

1

Duration

July 2025 - Ongoing

Project Overview

AnyConcept is the personal website at klauden.xyz, built with Kinetic Typography and precision-engineered aesthetics. The homepage features spring-physics-driven letter animations, a multi-layer expandable interactive text system, a custom crosshair cursor, and layered background effects. The article system is powered by Velite's Markdown content pipeline, and the entire site is deployed on Vercel.

Highlights

• KineticLetter spring physics — letters displace elastically on mouse proximity
• 13-item expandable interactive text system, up to 4 levels deep, with progress tracking and completion easter egg
• Custom crosshair cursor with accent-colored hover ring
• EMAIL copy button — roller animation with ✓ feedback
• Static PNG noise texture + background-clip: text replacing real-time SVG filters
• Multi-layer background: dot grid + dual ambient glow drift + mouse-following glow
• Velite-powered Markdown article system with bilingual support

Challenges

• React 19 strict mode constraints on component definitions and hooks ordering
• SVG feTurbulence filter causing high GPU load
• CSS filter inheritance — parent filter cannot be overridden on child elements
• Performance bottleneck from multiple mousemove listeners

Solutions

• Extracted all sub-components to top-level definitions, hooks placed before conditional returns
• Replaced real-time SVG filter with 128×128 PNG noise + background-clip: text
• Moved text-grain class from wrapper span to individual letter elements
• Registry pattern: consolidated 7 mousemove listeners into 1 shared handler