A cinematic annual report for Fundacion Rimas: the year its model scaled, told as an interactive, bilingual experience with the craft of the music culture it grew from and the rigor its funders expect. Live, indexed, and downloadable as a designed print edition.
Fundacion Rimas is an independent 501(c)(3) foundation in Puerto Rico, born within the Rimas Entertainment family and governed on its own terms. Through La Academia and its programs, it works with the island's most vulnerable youth, including cohorts inside the juvenile justice system. Mutiny Labs had already built its participation platform and private Listening Room. This engagement gave the foundation its flagship publication: an interactive annual report that turns the year the program grew from two campuses to seven, and across a border, into an experience worthy of the story.
The foundation lives between two worlds that rarely share a design language. Its partners wall carries Amazon, Spotify, Wendy's, Walmart and the UEFA Foundation, and its roots are in an industry that sets the standard for visual disruption. The report had to hold both: bold enough to feel at home in that culture, rigorous enough for funders, bilingual with Spanish and English as true peers, readable to a search crawler with no scripting, and honest about figures still in validation.
The foundation's new 2026 brand guidelines were our starting point; our job was to make them move. We translated the identity into an interactive reading system: an album-style experience with scroll-driven moments, per-chapter runtimes and a persistent player, real-geometry cartography, an interactive 3D studio, and a purpose-designed print edition. Underneath it all, one discipline: a single content model, build-time rendering, consent-gated measurement, and motion that yields to accessibility preferences.
Working from the foundation's new 2026 brand guidelines, the report carries the identity faithfully into interaction: the licensed display face, the official red over paper-black texture, numbered chapters and photography from the campuses themselves. It reads unmistakably like Fundacion Rimas: rooted in music culture, credible to any funder.
The report ships as a cinematic flagship edition and a complete long-form edition, in Spanish and English, 28 static pages generated from a single content model. Every page carries its full content before a single script loads, with language alternates declared, so funders and search engines read the whole story.
An interactive map renders 78 municipality geometries from true coastline data, with campus pins projected from real coordinates and hover labels naming every municipality the program reached. A second full-section map draws the border crossing to Mexico City as a glowing arc, roughly 3,200 kilometers of reach in one graphic.
Chapters play as tracks with a persistent player, per-chapter runtimes and a tracklist contents overlay. Flagship campuses become scroll-pinned cinematic moments over ambient people-free video loops built as generative-AI brand assets, and a growth timeline animates the year from two campuses to seven. Every effect honors reduced-motion preferences.
The mobile recording studio is rebuilt as a rotatable Three.js model constructed to the real trailer's dimensions. A purpose-designed 10-page print edition renders from the same content model to a downloadable PDF in each language. Analytics load only after a visitor consents.
Chapters, impact numbers, campuses, the timeline and every interface string live in one JSON content model. A single place holds each fact, so a corrected number changes once and propagates to every page that shows it.
The model renders to static HTML ahead of any visit: thirteen numbered chapters across a flagship edition, a complete long-form edition and deep-linkable chapter pages, 28 pages in all. Each page carries its full content before scripts run, so a bare request reads the entire story.
The 78 municipality geometries and every campus pin are drawn from real coastline and coordinate data into scalable vector cartography, complete with a reach layer and an off-map international activation, rendered as crisp vectors rather than image tiles.
Scroll-pinned moments, ambient people-free video loops, the campus growth timeline, count-up stats and the 3D studio are added as progressive enhancement on top of the readable base. Every effect yields to a visitor’s reduced-motion preference.
A purpose-designed 10-page print layout, not a web printout, renders from the same content model through a headless browser into downloadable PDF editions in Spanish and English. When a number changes in the model, the web report and the print edition update together.
The fully static output deploys to a global edge network with canonical URLs, declared language alternates and a sitemap that updates itself on every deploy. Analytics load only after a visitor accepts cookies; the default experience stays private.
under the hood: Static site generation from a single JSON content model, hand-tuned JavaScript scene and interaction system, bilingual routing with declared language alternates, real-geometry SVG cartography, interactive 3D with Three.js and WebGL, ambient generative-AI video assets, headless-browser print rendering to designed PDF editions, global edge delivery, consent-gated analytics
We reply personally. A senior partner, not a sales pod. We'll tell you straight whether we can help.
