ritareymusical.com · design review

Rita Rey, three ways

Three complete directions for the new site, each built from the content of the old América Tropical site. Every section is present in each: story, synopsis, characters, song demos, videos, writers, awards and history, readings, lookbook, research, news, contact. Open one, scroll, press play.

A

Direction A

Whitewash

Editorial and mural-led. Warm plaster, ochre and oxblood, big Fraunces type. Scrolling wipes the whitewash off the 1932 mural in the hero; the ten story beats run as a pinned horizontal wall; awards stamp in; the development history draws itself.

Tone Serious, cinematic, museum-grade.

Under the hood GSAP ScrollTrigger + SplitText, Lenis smooth scroll, SVG mask reveal, responsive Astro images.

Open Whitewash →
B

Direction B

Speakeasy

Noir and nocturnal: the Hot Tamales speakeasy at midnight. Reading footage plays under a WebGL smoke-and-spotlight shader; the title flickers on like a neon sign; your cursor becomes the light that lets you read the synopsis; song demos spin a vinyl jukebox; history runs on a film strip.

Tone Moody, glamorous, 1930s Los Angeles after dark.

Under the hood Custom WebGL2 fragment shader, GSAP, Lenis, CSS masks, scroll-snap reels.

Open Speakeasy →
C

Direction C

Fiesta

Olvera Street in daylight: papel picado waving over the title, bold color blocks, bouncing letters, a spinning badge and a marquee of musical styles. Postcards for the story, rosettes for the awards, draggable polaroids for the readings, and a jukebox with a live audio visualizer.

Tone Upbeat, lively, Cabaret-meets-Olvera-Street.

Under the hood CSS scroll-driven animations (animation-timeline), Web Audio API visualizer, GSAP Draggable, 3D tilt, container-aware layouts.

Open Fiesta →