Guillermo Flores — Ilusionista Website Redesign

Project Overview

A greenfield redesign of the existing ilusionista.com.ar, built for Guillermo Flores — an Argentine illusionist and mentalist based in Buenos Aires. The site is a single-scroll landing page intended to replace a generic predecessor with something that feels like a curated performance object: loaded with atmosphere, cinematic motion, and typographic character that evoke a live stage show. The aesthetic direction deliberately fuses Old West / woodtype fairground prints, Edgar Allan Poe gothic claroscuro, Tarantino-style oversized type, and Art Nouveau ornamental linework.

Objectives

• Brand Statement — Replace a generic web presence with a distinctive, personality-driven landing that mirrors the drama of a live performance.
• Conversion — Drive bookings via a direct WhatsApp and email contact section targeted at corporate events, private events, close-up magic, and theater runs.
• Performance Budget — Deliver the experience within a strict LCP < 2.5s, CLS < 0.1, and < 100KB of first-load JavaScript to keep the atmosphere from costing page speed.
• Accessibility — Maintain WCAG AA contrast on textured dark backgrounds and respect prefers-reduced-motion across every animation.

Project Workflow

• Direction & Spec — Defined aesthetic direction from 14 curated visual reference images before touching a single component, establishing a four-world hybrid palette (ink, bone, blood, brass) and a typographic system built around Bodoni Moda, Cormorant Garamond, and Inter — all self-hosted.
• Component Architecture — Built as an Astro static site with isolated React islands only where genuinely interactive; each page section (Hero, Bio, Services, Testimonios, Contacto) is its own .astro component with scoped styles.
• Cinematic Services Section — Implemented a scroll-pinned, full-viewport cinematic slider for four service categories (Corporate Mentalism, Private Events, Close-Up Magic, Theater) driven entirely by a custom scroll-progress engine in vanilla TypeScript — no GSAP license needed.
• Motion System — All animations (hero word-reveal stagger, Ken Burns photo drift, brass filete draw, stamp pop, section fade-up reveals, parallax chapter numerals, photo curtain reveal) respect prefers-reduced-motion and use will-change annotations to stay on the compositor thread.
• Transition Choreography — A custom brass-to-ink dot transition connects the Services section to the Testimonios section — the watermark period scales from a typographic ornament into a full-viewport ink wash, eliminating hard section cuts.

Results and Impact

• Fully Delivered Sections — Hero, Bio, Services (4 categories with cinematic scroll), Testimonios, and Contacto are all implemented and production-ready; the complete user journey from landing to booking CTA is functional.
• Motion Without Excess — Every transition is compositor-thread only (opacity + transform), respects reduced-motion preferences, and stays within the sub-100KB JS budget — visual richness does not come at a performance cost.
• Distinctive Visual Identity — The four-world aesthetic direction (gothic, western, theatrical, art nouveau) is consistently expressed across color palette, ornamental components (DoubleFrame, CornerFlourish, SectionDivider, ChapterNumeral, DropCap), and typographic hierarchy — a clear departure from generic AI-era landing templates.
• Scalable Component System — Ornament components are parameterized and reusable, making it straightforward to extend the site with new sections (demos video, press gallery) without visual inconsistency.