Dani Production

Overview

A static one-page website for a wedding videography and photography studio. The page presents the studio's identity, lists four services (Cinematic Films, Photography, Same-Day Edits, Full Production), showcases a photo gallery, walks through a four-step client process (Consultation, The Day, Post-Production, Delivery), includes client testimonials, and ends with a contact form plus Instagram, WhatsApp, and email links.

Approach

The design leans on a warm, minimal "quiet luxury" aesthetic: a cream and taupe palette, serif display type (Cormorant Garamond) paired with a light sans (Jost), and generous whitespace. Motion is treated as a core part of the brand: an opening "veil" transition reveals the hero, letters animate in individually, and scroll-triggered reveals fade and un-blur content as the user moves down the page. The process section uses a sticky/pinned layout with a scroll-tracked progress beam. All interactive behavior degrades gracefully: if GSAP fails to load or the user has prefers-reduced-motion set, animations are skipped and content is shown immediately in its final state.

Tech stack

• HTML5, CSS3 (custom properties, grid/flexbox, clip-path reveals), vanilla JavaScript (IIFE, no framework)
• GSAP 3.12.5 and ScrollTrigger (via CDN) for scroll-driven parallax, pinning, and timeline animations
• IntersectionObserver for scroll-reveal triggers and scroll-spy nav highlighting
• Google Fonts (Cormorant Garamond, Jost)

Engineering highlights

• Accessibility-conscious build: aria-live status region on the form, aria-expanded/aria-controls on the mobile menu toggle, a manual focus trap with Escape-to-close in the mobile menu, and a full prefers-reduced-motion fallback path that disables animation and forces all content visible.
• Progressive enhancement pattern throughout: GSAP presence and reduced-motion are checked before any animation runs, so the page remains fully readable even when JavaScript is partially degraded.
• Client-side contact form: validates name and email format with a regex and shows an inline confirmation message.
• Custom SVG "window light" motif in the hero (gradient panes plus a Gaussian blur filter) combined with CSS blend modes to simulate projected sunlight, then animated with a slow GSAP drift and scroll-linked parallax.