Clarice Lispector 100th Anniversary

1. Executive Summary

In celebration of the centenary of Clarice Lispector, one of Brazil’s most defining literary figures, the Instituto Moreira Salles (IMS) commissioned a digital monument: “Toda a Clarice” (All of Clarice). The project required a delicate balance between a rigorous academic archive and an emotive, immersive narrative experience.

The result is a dual-mode platform serving both researchers and the general public. It consolidates over 4,000 digitized assets—manuscripts, letters, paintings, and translations—into a cohesive digital ecosystem. The project achieved critical acclaim, securing huge media coverage and 2nd Place in Digital Design at the Brasil Design Awards 2020.

2. The Challenge

The project faced a complex dichotomy: Structure vs. Chaos.

• The Archival Challenge (Structure): IMS holds a massive, structured collection. We needed to display 4,000+ unique items (Custom Post Types) with deep metadata relations. A manuscript needed to link to its transcription, its translations, and the letters mentioning it.
• The Narrative Challenge (Chaos): Clarice’s work is described as “visceral, poetic, and labyrinthine.” A standard grid layout would fail to capture her essence. The client required a “Narrative Mode”—a non-linear, exploratory interface where users could get “lost” in the content, mimicking the stream-of-consciousness style of the author.
• Performance at Scale: Rendering thousands of high-resolution archival images while maintaining the silky-smooth animations required for the narrative mode presented significant performance bottlenecks.

3. Tech Stack

To solve these challenges while adhering to a native-first ideology, we avoided heavy frontend frameworks (like React or Vue) that would complicate SEO and increase initial load times. Instead, we leveraged the power of the platform.

• Core CMS: WordPress (Custom Theme Development). Chosen for its robust content management and the client’s familiarity with the ecosystem.
• Database: MySQL with complex relationship mapping.
• Frontend Core: Vanilla JavaScript (ES6+). No heavy framework overhead. Direct DOM manipulation for maximum performance.
• Animation Engine: GSAP (GreenSock Animation Platform). Critical for the complex, timeline-based animations in the “Narrative” mode.
• Styling: SASS/CSS3 using BEM methodology for modular, maintainable styles.
• Asset Management: Custom lazy-loading logic for high-density image grids.

Under the Hood: Architecture & Logic

The architecture is built on a “Twin-Engine” concept.

1. The Relational Backbone (The Archive)

We utilized WordPress Custom Post Types (CPTs) extensively to distinguish between ‘Manuscripts’, ‘Letters’, ‘Photos’, and ‘Books’. However, the magic lies in the Taxonomy Architecture.

• We implemented a bi-directional relationship system. If an admin tags a letter as referencing “The Hour of the Star,” the system automatically creates a back-reference on the book’s page.
• This creates a “Knowledge Graph” within WordPress, allowing users to traverse the content endlessly without hitting dead ends.

2. The Labyrinth (The Narrative Mode)

For the immersive experience, we bypassed standard WP templates.

• Asynchronous Navigation: We implemented a pushState-based navigation (similar to Barba.js patterns) to fetch content via the WP REST API without refreshing the page. This preserves the “mood” and audio states between transitions.
• Algorithmic Layouts: The “constellation” visual effects utilize JavaScript to position elements dynamically based on viewport size, creating a feeling of randomness that is actually strictly controlled to prevent overlaps.

4. UX & Performance

The user experience dictates the technical constraints.

• Immersive Loading: To handle the 4,000+ items, we implemented “progressive disclosure.” The site loads a lightweight skeletal structure first (critical CSS), then hydrates the interactive “Cosmos” elements. This keeps First Contentful Paint (FCP) low despite the heavy visual load.
• Reduced Motion Support: Acknowledging accessibility, the GSAP animations respect the user’s prefers-reduced-motion settings, disabling the parallax and “flying” effects for users prone to motion sickness.
• Responsive Masonry: The grid layouts use native CSS Grid where possible, falling back to JS calculations only for complex, multi-height archival items, ensuring smooth scrolling on mobile devices.

5. The Results

The project was a technical and cultural success, proving that WordPress can be driven to deliver museum-grade, avant-garde experiences.

• Recognition: Silver Medal at the Brasil Design Awards 2020.
• Engagement: The “Narrative Mode” saw significantly higher session durations compared to standard IMS archival pages, validating the “immersive” strategy.
• Scalability: The architecture successfully handled the massive traffic spike on the centenary launch day (Dec 10, 2020) without downtime, thanks to aggressive caching layers (Redis/Varnish) implemented at the server level.

6. Retrospective

What went well

The decision to stick to Vanilla JS and GSAP instead of a heavy Single Page Application (SPA) framework was vindicated. It kept the site indexable (SEO-friendly) and performant on lower-end devices common in Brazil.