Vigorous Vigor: Musician Portfolio Landing Page

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.

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.

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.

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.

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.

The live site is currently being polished and optimized for mobile. A live video preview of the full experience is available on my profile posts.