QXENITH

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