Esteban Canales
Great Software Developer

Interfaces that have a heartbeat, code clean enough to be proud of. Off-screen: fast cars, good music, rabbit holes.

I build web experiences that feel different. Fast, precise, and alive — from a rough idea to a polished product running in production.

❯

Creative Technologist

QXENITH

Digital Studio Website

DetailLive

Full production website for QXENITH — a digital studio built around the idea that interfaces should feel alive. Every interaction was designed from scratch: a 6×6 flip-card hero grid that expands on scroll, a morphing circular navigation menu, animated SVG color bars in 7 geometric variants, a bilingual Korean/English design system, and a custom Playwright-based screenshot CLI.

QXENITH demo 1QXENITH demo 2

What was built

  • 6×6 flip-card hero grid with GSAP ripple expansion and hover trail system
  • Morphing circular menu using GSAP timeline — compact button ↔ full panel
  • 7 animated SVG color bar variants: vertical, horizontal, diagonal, L-shape, Z-shape, cascade
  • SegmentedText virtual canvas — all cards share a single coordinate space for aligned typography
  • Custom scroll container with WheelEvent dispatch and cross-device compatibility
  • Company logo marquee with Simple Icons and seamless CSS loop
  • Playwright CLI tool for automated design-ready screenshots across breakpoints
  • Fully bilingual — English copy with Korean 한국어 translations throughout

What we learned

  • CSS Grid gap and sub-pixel renderinggap:0 alone doesn't eliminate 1px artifacts between 3D-context elements; a -0.5px inset on CardFace fixes the compositing gap
  • SegmentedText virtual canvas patternall N×N cards share a cols×100% by rows×100% coordinate space, making any horizontal edge appear across all columns simultaneously
  • GSAP + CSS transition coexistencerunning GSAP rotateX on a card while CSS transitions border-radius requires careful timing to avoid mid-animation state conflicts
  • clamp() minimum trapclamp(600px, 100vw, 1000px) returns 600px on mobile because 100vw=390px falls below the minimum, causing a full-width logo to become the CSS minimum
  • styled-jsx keyframe scopingkeyframes defined in <style jsx> get renamed internally; references in inline animation styles break silently
  • Custom scroll containers and PlaywrightfullPage screenshots require overflow:visible on the container, and WheelEvent dispatch is needed to trigger React scroll listeners
  • React Compiler with GSAPuseRef-based imperative animations conflict with compiler memoization; escape hatches via useMemo on derived state resolve the issue

Stack

Next.js 16React 19TypeScript 5Tailwind CSS v4GSAP 3.14Simple IconsVercel AnalyticsPlaywrightGeist / Nanum Brush Script