Vigorous Vigor: Musician Portfolio Landing Page

Hero

✅ Rive-powered interactive micro-interactions with state machine-driven hover animations

✅ Dual-zone hover system with independent boolean inputs and custom pen-drawn hitboxes

✅ Scroll-driven GSAP transitions, choreographed section animations, and dynamic navbar

✅ Custom cursor, z-index depth layering, and scroll-reactive background shifts

✅ Hand-coded from scratch (HTML/CSS/JS), no frameworks

✅ Fully responsive across all devices, including below-average spec phones

✅ Unique immersive style preserved on mobile without overflow, shifting, or layout breaks

✅ Istanbul-based server setup for location-optimized performance

✅ SEO tags, favicon, image quality, and file extensions carefully configured

✅ sitemap.xml and robots.txt fully optimized

✅ Main site build delivered and live

Vigorous Vigor is an anarchic musician rooted in dark, demonic aesthetics. Deep navy as a signature color, gargoyles, obelisks, and a raw lyrical style built around spitting uncomfortable truths. The site needed to feel like stepping into his world: heavy, atmospheric, and reactive to your presence.

Scroll-Driven Background Transition: The page opens pitch black. As you scroll past the first hero height, the background smoothly shifts from black to the artist's signature deep navy. Scrolling back up reverses it, fading from navy back into darkness.

Dynamic Navbar: The navbar starts in dark navy and transitions to black as you scroll down, sliding smoothly with the page. On upward scroll it shifts back to navy. Always present, always atmospheric.

Custom Cursor: A custom cursor replaces the default, reinforcing the bespoke feel across the entire experience.

Depth Layering: The gargoyle.riv canvas is intentionally placed above the navbar z-index, creating a layered depth effect where the gargoyle breaks the expected UI plane.

Obelisk idle state

Obelisk hover state — glowing

The hero features an obelisk illustration that reacts to the cursor in real time. I built this using Rive's state machine system with a boolean input bound to pointer enter/exit listeners.

The process: I drew a transparent hitbox around the obelisk shape using Rive's pen tool, set it as the listener target, and wired pointer enter to true, pointer exit to false. Between the two animation states I placed a 360ms transition. The result is a glowing, pulsing obelisk that shifts between two visual states with hand-drawn design overlays animating in loops, all responding to the mouse in real time.

Gargoyle idle state

Gargoyle body hover — eye glow effect

Gargoyle floor hover — base illumination

The about section features a hyperrealistic gargoyle with dual-zone hover interactions. In Rive's design mode, I layered custom shapes and pen-drawn elements over the gargoyle base, adjusting colors and opacity to create the transformation effect. Everything was grouped under a single "Gargoyle" element.

Two separate hitboxes control two independent hover zones:

GARGOYLEBODY: drawn over the upper torso, triggers a body glow effect on hover

Floor: drawn under the gargoyle's base, triggers a separate floor illumination

Each hitbox is a custom pen-drawn transparent shape, each bound to its own pointer in/out listener with independent boolean inputs. Hovering over the body and the floor produce completely different lighting reactions, working independently of each other.

For elements not actively animating, I locked their opacity (0 or 100) and position to their original design-mode placement on every keyframe. This prevents drift, flickering, or layout shifts during state transitions. Since both visual variants were designed and edited directly in Rive's design mode (not imported as mismatched assets), there are zero alignment or scaling issues between states.

Rituals section — idle state

Rituals section — album hover state

The Featured Songs section (titled "Rituals" to match the site's dark ceremonial tone) lets visitors browse albums through a hover-to-reveal system. Hovering over an entry reveals the album artwork. Clicking opens a time bar showing track duration with play/pause controls.

The transition from Featured Songs to the About section is choreographed: ritual elements converge from the top and bottom of the viewport, merging to form the word "VIGOROUS," then split apart again into the ritual motifs as the About section takes over. A scroll-driven GSAP sequence ties the whole movement together.

We paid attention to every tiny detail to make sure the site's unique immersive style translates to mobile without any overflow, shifting, or layout breaks. We tested on below-average spec phones to confirm smooth, fluid performance before considering it done.

The site was built with optimization at its core. We set up an Istanbul-based server for location-optimized delivery, carefully configured SEO tags, favicon, image quality, and file extensions. Since this is a site that needs to stand out and attract collaboration opportunities, we kept SEO and performance at maximum: sitemap.xml and robots.txt were cleanly optimized.

The main site build and its content assets were delivered, and the site is now live at vigorvigorous.com.

The project will continue to evolve through updates based on Vigorous Vigor's requests, including future content, features, and refinements as needed.

HTML / CSS / JavaScript: Hand-coded from scratch, no frameworks

GSAP: Scroll-driven background transitions, navbar color shifts, section transitions, and choreographed animations

Rive: State machines, boolean inputs, pointer listeners, pen-tool hitboxes, design-mode asset editing, z-index depth layering

A landing page that feels alive. The Rive elements aren't decorative, they're atmospheric. The obelisk pulses when you approach it, the gargoyle awakens in two zones when you hover over it. The background breathes with your scroll. Small interactions, but they set the tone for the entire experience: dark, reactive, and unmistakably Vigorous Vigor.