Bare Metropolis Movies is a New York–based mostly manufacturing studio identified for its deliberate, assured, and visually distinctive work in industrial and narrative filmmaking. Their initiatives are characterised by rhythm, management, and intentionality—an angle that essentially formed the expectations for his or her web site.
The Problem
Redesigning the corporate’s web site wasn’t about aesthetic selection or technical novelty: the problem was restraint paired with depth.
A standard portfolio construction would have flattened the studio’s character, whereas extreme visible results would have distracted from the work itself. The location needed to specific confidence with out clarification, motion with out chaos, and construction with out predictability. Each alternative wanted to help the sensation that Bare Metropolis Movies is aware of precisely who they’re and trusts their viewers to observe.
The consequence wanted to really feel energetic always, even in moments of stillness.
Design Route and Visible Language
Brutalist Affect as a Basis
The design language attracts from brutalist structure, the place construction is seen and hierarchy isn’t hidden. Blocks really feel heavy, spacing feels deliberate, and scale is used as a main instrument for emphasis. Nothing is ornamental for the sake of ornament. Every factor occupies area with objective and readability.
This method created a visible system that feels assured and direct, mirroring the best way the studio approaches filmmaking.
A Monochromatic Electrical Blue System
The choice to work with a single electrical blue tone was pushed by a need for readability and focus. Reasonably than counting on colour variation to create curiosity, the interface permits movement, typography, and imagery to do the work.
The monochromatic method removes noise and builds recognition rapidly. It additionally reinforces the concept that the location is a managed surroundings, the place each deviation is intentional.
Cultural References and Easter Eggs
Refined references to web tradition and filmmaking language are embedded all through the expertise.
These moments seem in small behaviors, surprising interactions, and particulars that reward consideration with out demanding it. This contains the refined screensaver that pays homage to the traditional bouncing DVD emblem, and the image-trail impact on the emblem within the website’s footer.
They aren’t defined or highlighted. Discovery occurs naturally by exploration, reinforcing a way of curiosity and play with out undermining the general restraint.
Confidence Expressed By means of Discount
Model confidence exhibits up by what’s eliminated as a lot as by what stays. Copy is minimal and avoids clarification. Visuals are given area to talk for themselves. Transitions are daring with out being theatrical.
The location displays the identical perception the studio locations of their work and within the purchasers who select them.
Movement as a Core Design Materials
Motion is handled as a foundational materials reasonably than an accent. Components hardly ever sit idle, but movement by no means feels gratuitous. Transitions really feel nearer to editorial cuts than conventional fades. Hover states reply rapidly and decisively, reinforcing a way of immediacy.
The purpose was to create an interface that feels alive with out ever feeling stressed.
Technical Structure and Artistic Improvement
The next sections discover how the location’s design intent is translated into technical construction, with Tomas Kmet increasing on how code, logic, and experimentation work collectively to help rhythm, management, and movement.
The underlying technical stack used on the venture:
- Full stack VueJS framework Nuxt
- Canvas3 – self-developed Nuxt module for ThreeJS integration and extra options as easy scroll and scroll based mostly animations
- ThreeJS for picture hovers and reveal animations with GLSL shader capabilities
- GSAP animation library for timeline animations with advanced steps and good efficiency
- Sanity.io content material working system, with orderable doc record plugin for simple content material administration and ordering by drag and drop
Customized Code and Full System Management
Each interplay throughout the location is custom-built, avoiding generic animation libraries or default interplay patterns. This method permits exact management over timing, sequencing, and conduct, retaining movement aligned with the general rhythm of the location.
The system is designed to really feel intentional reasonably than automated.
Beneath the floor, Canvas3, Nuxt module handles Three.js integration alongside core options resembling easy scrolling, picture rendering throughout the Three.js scene, and scroll-speed manipulation through directives.
The structure element is the principle entry level for utilizing the Canvas3 module. The structure wraps the principle content material of the pages to a easy scroll factor. This offers us management over the scroll and likewise utilization of “on-scroll-action” directive. Inside the directive, we have now developed a number of options for full management, resembling callback perform for factor reveal, scroll suggestions perform passing scroll place for scroll interactions, mounted scroll choice and extra, with some detailed further choices for energetic state of the factor with the directive, which supplies the directive big selection of utilization inside reveals, transitions and reactivity to scroll. The directive allows factor monitoring, per-element scroll-speed management, and the definition of viewport-based callback capabilities.
The structure element additionally initializes a ThreeJS canvas. With the “canvas3-image” directive, we are able to simply add photographs to the ThreeJS scene, defining which shader to make use of and establishing uniform values immediately on the picture factor. The uniform values are then handed to the shader. This fashion we’re capable of outline the animation triggers on the element stage.
All animation logic finally flows down right into a single requestAnimationFrame loop throughout the Canvas3 module, answerable for easy scrolling, Three.js scene render, element-entry animations, and web page transitions, for easy efficiency.
Structure Logic With out Fastened Templates
Layouts reply to content material as a substitute of following inflexible templates. Every venture is given its personal spatial logic, which prevents visible repetition and retains navigation unpredictable with out feeling disorienting.
This flexibility helps progress whereas sustaining character.
The CMS resolution, constructed with Sanity.io, was designed round content material flexibility. Picture top defines the peak of every row, creating area for fixed-scroll results on shorter content material thumbnails.
On the identical time, the system provides content material editors full management to regulate content material, modify total structure construction, and handle the order of initiatives, each on the homepage and independently for every director.
Web page Transitions as Narrative Gadgets
Transitions perform as connective tissue reasonably than ornament. Entry and exit states are designed with the identical care as seen layouts, creating continuity between sections and reinforcing pacing.
Navigation feels extra like transferring between scenes than loading new pages.
The technical problem was to design a sturdy system that might help all navigation states throughout the location navigation construction, web page overlay, header emblem, and the administrators overlay menu. This included the preliminary load, scroll-driven welcome transition, interactions throughout the administrators navigation, and full web page transitions.
All interactions and transitions have been carried out utilizing performance supplied by the underlying Canvas3 module, enabling seamless binding between scroll enter, welcome transitions, and easy web page overlay animations.
Hover States and Interplay Suggestions
Hover interactions are quick, purposeful, and restrained. They supply rapid suggestions whereas reinforcing hierarchy and route, avoiding pointless flourish.
Every interplay exists to information consideration and preserve momentum.
All interactions are constructed as reusable elements, structured in code to replicate the underlying design system. Hover states observe a constant logic throughout the location, reinforcing hierarchy and clearly supporting the motion triggered on click on.
Video Dealing with and Efficiency Choices
Video performs a central position throughout the location, which required cautious dealing with to take care of responsiveness. Loading methods, scroll-based triggers, and movement thresholds are tuned to prioritize perceived pace and fluidity.
The expertise stays immersive with out overwhelming gadgets.
For the movie thumbnail hover state, a {custom} shader was developed close to a CRT display screen. The impact dissolves the picture into RGB-like channels, utilizing a colour palette tailored from pure purple, blue, and inexperienced into tones extra carefully aligned with the Bare Metropolis Movies model.
Video autoplay is triggered on hover, with enough buffer time to permit the media to load whereas the shader transition completes.
The identical CRT-inspired shader is reused in different areas of the location the place image-reveal animations are utilized, making certain visible consistency throughout interactions.
Cell-First Pondering
Cell conduct was refined with decreased movement and a stronger deal with contact interplay. Views are simplified to attenuate distraction on smaller screens whereas preserving the location’s core character.
The location is constructed on a scalable grid system that adapts content material fluidly throughout display screen sizes. Responsive changes strike a stability between sustaining constant animation and transition language throughout gadgets, whereas by no means compromising accessibility or usability on cellular.
The expertise retains its character throughout display screen sizes.
What This Mission Explores
This venture explores how design intent and technical execution can evolve collectively. Visible choices inform code, and technical constraints form design outcomes. The result’s a website that feels cohesive, expressive, and grounded in craft.
Closing Reflection
The Bare Metropolis Movies web site doesn’t try to explain filmmaking or clarify its course of. It behaves prefer it. By means of construction, pacing, and confidence, the location communicates its identification in the identical method the studio communicates by movie.
Each element, from structure to animation timing, contributes to a system that feels alive, deliberate, and deeply aligned with the studio behind it.
