Explore showcase
Holywatr
Web Developer · Nov 2025 – Mar 2026
Experience12 / 13
Overview
At a glance
Freelance engagement delivering Holywatr’s multi-page presence: home, merch powered by Shopify, and contact flows with Klaviyo polish. The creative bar was high—distortion had to feel cinematic without breaking click fidelity.
Vanilla JSShopifyGraphQLVFX.js✚
Open live demoFollow Link
Features
- Home template plus cohesive navigation.
- Merch views backed by Storefront GraphQL.
- Contact page and upgraded Klaviyo footer treatment.
- Slide-in YouTube mini-player on Home.
- Custom ASCII art and border language reinforcing the cathedral/digital-horror vibe.
- Hover/click micro-interactions sitewide.
- Responsive consistency across breakpoints.
Implementation
- Adapted and refactored existing Shopify Storefront GraphQL code paths for merch display flow and UI consistency.
- Organized project structure into cleaner page-level and asset-level modules to reduce coupling and duplicated logic.
- Implemented shader presentation layer with VFX.js and iteratively tuned effect intensity/placement behavior.
- Manually aligned interactive HTML elements under shader-distorted visuals so click regions remained usable.
- Tuned z-order and render behavior to reduce visual conflicts and preserve interaction reliability.
- Compressed image assets and tuned responsive CSS breakpoints for improved performance.
- Added robots/meta indexing signals to support crawlability and basic search visibility.
Challenges
- Biggest pain point: fish-eye warp made visual element location diverge from clickable DOM hitboxes.
- Shader rendering cost was a major bottleneck on weaker hardware.
- Required repeated trial-and-error to balance effect intensity with usability.
- Needed to align creative direction with partner/client final approvals and constraints.
- Early shader assumptions were naive, and debugging real browser render behavior took time and all-nighters.
Reflection
- This was genuinely exciting because real fans use it, so it didn’t feel like just another class artifact.
- I got humbled hard by shaders. At first I misunderstood what the browser was doing under the hood, and I assumed interactivity under heavy distortion would be near-impossible.
- The real problem ended up being warped visuals versus real hitboxes. I burned nights trying to make that passable, and while it wasn’t mathematically “perfect,” we got it to a usable state.
- If I revisit it now, I’d implement automatic quality tiers so shader intensity scales based on device capability.
- Also learned an important real-world lesson: I can push ideas and be creative, but final calls belong to contractor/client, and that balance matters.