Introduction
Creating the website for Siena Film Foundation presented an exceptional opportunity to express cinema's essence in its purest digital form. Drawing from the neo-romanesque inspiration rooted deeply in Tuscan architecture, we developed a distinctive visual language centered around a grotesque visual art direction, which significantly shaped the art direction.
Architecture can be thoughtfully planned within the digital experience, serving as a key feature to drive visual direction.
Key Features
Filmstrip Homepage Slider
A WebGL-powered slider inspired by cinematic filmstrips and vintage poster typography sets the stage. Enhanced with a subtle parallax effect, this component dynamically conveys depth and motion, immediately immersing visitors into the cinematic world of Siena Film Foundation.
Dynamic Menu
Drawing inspiration from classic cinema tickets, our dynamic navigation system elegantly combines form and function. The left-side menu updates dynamically based on the active page, acting as local navigation, while the right-side panel provides constant access to global site navigation, ensuring seamless user experience.
Old Lettering-Inspired Rollover
Evoking nostalgic theater signage, this looping rollover animation enhances the site's cinematic feel. Featured prominently on both the contact page and homepage slider, it adds subtle yet impactful motion interactions, deepening engagement through detailed craftsmanship.
Work Page Slider & Dynamic Rearrangement
Utilizing WebGL, this slider offers dual modes: Poster Mode for static, poster-style thumbnails, and Footage Mode, showcasing live film frames that dynamically update as users interact. This powerful cinematic feature reinforces the storytelling through motion and interactivity.
Preloader & Dynamic Stripes
The preloader animation employs dynamic stripes inspired by neo-romanesque Tuscan design, smoothly transitioning into the site's content. This visually engaging loading mechanism reinforces branding and enhances resource optimization.
Challenges
Creativity vs. Usability
Integrating innovative WebGL effects with practical navigation posed a significant challenge. We meticulously balanced ambitious visual artistry with robust functionality, ensuring that creativity enriched, rather than hindered, the user experience.
Dual-Function Dynamic Navigation
Creating a dual-function dynamic menu required precise UX planning. Extensive prototyping allowed us to perfect a system that maintained aesthetic integrity while offering seamless navigational efficiency.
Cinematic Consistency
Ensuring consistent cinematic quality across diverse site elements involved a systematic approach to animation design and implementation. Establishing clear motion guidelines early enabled a cohesive and harmonious user journey.
Creativity should elevate the user experience, never weigh it down.
Technical Aspects
To handle intensive WebGL assets efficiently, we adopted GPU texture compression, server-side optimization, and effective channel packing. We streamlined development by leveraging Webflow's flexibility combined with custom WebGL integrations.
Additionally, we implemented a sophisticated post-processing and blur system, applying directional blur effects—horizontal on work pages, vertical on the homepage. This dynamically adjusts blur intensity and saturation based on slider interaction speed, effectively managing visual motion and enhancing user experience through controlled cinematic transitions.
Animations and interactions were expertly managed using GSAP, paired with Lenis for scroll management, ensuring smooth performance across devices.
Technologies
- WebGL & 3D Integration: Three.js for advanced WebGL rendering.
- Frontend Frameworks: Webflow with custom WebGL integrations.
- Animation & Interaction: GSAP animations, Lenis for smooth scrolling.
- Backend & CMS: Webflow CMS for content management.
Through meticulous planning, rigorous testing, and creative exploration, the Siena Film Foundation website delivers an immersive cinematic experience rooted deeply in thoughtful design and innovative technology.
Credits
Design & Technical Director: Niccolò Miranda [ @niccolomiranda ]
Production: G-NS Studio [ @gns_studio ]
Development: Federico Valla [ @ffmfed]
UI Design: Carolina Hernando [ @caro.hernando ]
Creative Direction: Shawn Dhillon [ @shawndhillon_ ]
Company Info
Siena Film Foundation is a boutique production house dedicated to crafting groundbreaking narratives that push the boundaries of cinematic storytelling.