惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Security Archives - TechRepublic
Security Archives - TechRepublic
T
The Exploit Database - CXSecurity.com
P
Proofpoint News Feed
Scott Helme
Scott Helme
NISL@THU
NISL@THU
Cisco Talos Blog
Cisco Talos Blog
C
Cybersecurity and Infrastructure Security Agency CISA
AWS News Blog
AWS News Blog
V
Vulnerabilities – Threatpost
J
Java Code Geeks
U
Unit 42
The GitHub Blog
The GitHub Blog
H
Help Net Security
T
Tenable Blog
aimingoo的专栏
aimingoo的专栏
Jina AI
Jina AI
Spread Privacy
Spread Privacy
Apple Machine Learning Research
Apple Machine Learning Research
人人都是产品经理
人人都是产品经理
L
Lohrmann on Cybersecurity
T
Threatpost
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Engineering at Meta
Engineering at Meta
A
About on SuperTechFans
I
InfoQ
Microsoft Azure Blog
Microsoft Azure Blog
B
Blog
L
LINUX DO - 最新话题
K
Kaspersky official blog
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
T
Threat Research - Cisco Blogs
C
Check Point Blog
T
The Blog of Author Tim Ferriss
有赞技术团队
有赞技术团队
宝玉的分享
宝玉的分享
Help Net Security
Help Net Security
Google DeepMind News
Google DeepMind News
A
Arctic Wolf
Y
Y Combinator Blog
N
News | PayPal Newsroom
M
MIT News - Artificial intelligence
Latest news
Latest news
H
Hacker News: Front Page
Blog — PlanetScale
Blog — PlanetScale
腾讯CDC
I
Intezer
爱范儿
爱范儿
F
Fortinet All Blogs
P
Palo Alto Networks Blog
C
CERT Recently Published Vulnerability Notes

Codrops

Meet the Speakers of the First Three.js Conference | Codrops The Architecture Behind Trionn: Coordinating GSAP, Three.js, Lenis, and Web Audio | Codrops Where Stories Become Interactive Worlds: How makemepulse Brings Ideas to Life Across Web, XR, and Beyond | Codrops The Sleepers: Creating an Atmospheric WebGL Experience with Lightweight Techniques Building an Interactive Wave Propagation Cube Grid with Three.js | Codrops Ten Years Away: Designing an Interactive Comic for Studio375’s Tenth Anniversary | Codrops Building a Scroll-Driven 3D Gallery Using a Blender Camera Path with Three.js and GSAP | Codrops From Years of Client Work to a Next.js + Sanity Starter Kit | Codrops Sculpting a Digital Athlete: Capturing Stefanos Tsitsipas Beyond the Court | Codrops Building Persistent Page Transitions with WebGPU and Vanilla JavaScript | Codrops Engineering the Web Experience Behind Shopify’s Spring ’26 Edition: Everywhere | Codrops Shaping Stories into Experience: The Work of Kevin Lam | Codrops Testing What Users Actually See with Vitest and Chromatic | Codrops Podium: Building a Website Where Running Becomes Storytelling | Codrops Designing Beyond the Surface: How DashDigital Turns Complexity into Clarity | Codrops Creative Entrepreneurship: Designing the Machine | Codrops Exploring 3D Image Rotations on Scroll | Codrops Always Building, Always Learning: Cyd Stumpel’s Journey Through the Modern Web | Codrops Designing A Better Lou: Reducing Cognitive Load Through Design, Content, and Systems | Codrops Sketching the Impossible: A 3D Portfolio Built Without a Single 3D Model | Codrops Building Horeca: Advanced Motion Design in Webflow Without the Performance Trade-Offs | Codrops Building an Interactive Digital Stamp Collection with Shaders, Postcards, and Playful Inspection | Codrops No Two Paths Alike: Inside San Rita’s Approach to Digital Experiences | Codrops The Making of the New Lesse Studio Website: Clarity, Performance, and Intentionality | Codrops Creating a Thumbnail Flow Animation with GSAP MotionPath | Codrops Forging Her Own Path: Houmahani Kane’s Journey in Creative Development | Codrops Beaucoup and the Pursuit of Memorable Experiences | Codrops The Future of Emotional Technology: Comfort Websites for Growth and Self-Awareness | Codrops The Never Ending Story: Building a Seamless Infinite Scroll Experience with GSAP & Lenis | Codrops Whooshes, Snaps and Shaders: Adrien Vanderpotte and the Feeling of the Interface | Codrops Building a Scroll-Driven 3D Cube Gallery in Webflow with GSAP | Codrops Creating Scroll-Driven SVG Map Animations with GSAP | Codrops Made With Gsap: Building a Fun Gravity-Based Mouse Trail | Codrops 80s Business Tech and Seamless Scene Transitions: Inside Shader.se’s Scroll-Driven WebGPU Pipeline | Codrops Merlin: The Code Boutique Turning Motion Into Digital Magic | Codrops Designing Ourselves: The New Obys Identity and Website | Codrops Exploring the HTML-in-Canvas Proposal | Codrops Le:mma Studio: Building the Feeling Behind the Screen | Codrops From Shader Uniforms to Clip-Path Wipes: How GSAP Drives My Portfolio | Codrops Reverse-Engineering Claude AI’s Mascot Animations with SVG and GSAP | Codrops Akaru: Crafting Precision-Driven Digital Experiences | Codrops Designing Against the Gallery: A Two-Year Journey to a Layered Portfolio Experience | Codrops Between Human and Machine: Sofia Papadopoulou’s Approach to Augmented Creativity | Codrops More Than a Portfolio: Building a Scroll-Driven 3D World with Something to Say | Codrops Rhumb Studio: Small but Mighty, Shaped by Curiosity | Codrops Susurrus: Crafting a Cozy Watercolor World with Three.js and Shaders | Codrops Building 4WIDE: Turning Distortion, Blur, and Motion into a Coherent Experience | Codrops A Playful Clip Menu with GSAP’s easeReverse | Codrops False Earth: From WebGL Limits to a WebGPU-Driven World | Codrops Interactive Storytelling for the Web: Building Immersive Stories with Timelines, 3D, and Layered Scenes | Codrops The Art of Complex Motion: Corentin Bernadou’s World of Shaders and Experimentation | Codrops They Call Me Giulio: The Making of a Cinematic Cyberpunk Portfolio | Codrops Lusion: Where Digital Craft Meets Ambitious Experimentation | Codrops The Exat Microsite: Pushing a Typography Showcase to New Creative Extremes | Codrops A Single DM, a First SOTD, and the Start of Chanh M. Ho’s Creative Journey | Codrops Creating Custom Page Transitions in Astro with Barba.js and GSAP | Codrops R—K ’26: The Thinking and Code Behind a Portfolio Led by Presence | Codrops Building the Maxima Therapy Website: React, GSAP, and Dabbling with AI | Codrops Where Engineering Meets Craft: Edoardo Lunardi’s Obsession with the Details | Codrops Animating 160,000 Cubes in Three.js to Visualize Dithering | Codrops Arnaud Rocca’s Portfolio: From a GSAP-Powered Motion System to Fluid WebGL | Codrops Where Confidence Needs No Decoration: The Malvah.Studio Story | Codrops Motion Highlights #17 | Codrops
Inside Bisous: Designing an Editorial Experience for Cinematic CGI | Codrops
By Beaucoup · 2026-06-29 · via Codrops

A behind-the-scenes look at how editorial composition, purposeful motion, and minimalist design create a portfolio that lets cinematic CGI take the spotlight.

case study

In collaboration with Bisous Production, we reimagined their digital presence through a complete creative overhaul encompassing Art Direction, UI/UX Design, Development, and Animation.

Bisous is a creative studio specialized in 3D and CGI production, crafting immersive visual narratives for brands through innovative and meaningful communication. The challenge was to design a platform capable of showcasing highly detailed visual work without overwhelming the user experience.

Our response was to create a clean, fluid, and highly immersive website where the visuals naturally take center stage. This minimalist foundation is paired with a strong editorial approach, creating a dynamic reading rhythm and allowing different content formats to coexist harmoniously throughout the experience.

The Concept

The entire website experience is structured around four main columns. This layout system became the visual backbone of the project, ensuring consistency across every section and page while giving users a clear and intuitive spatial reference throughout navigation.

The grid creates balance and precision while leaving enough flexibility for large-scale imagery, cinematic transitions, and editorial compositions to breathe naturally within the interface.

Typography & Color System

To reinforce the duality between artistic expression and technical precision, we paired two complementary typefaces.

The primary sans-serif typography embraces the visual codes of luxury branding and Swiss design, clean, refined, and highly legible. In contrast, a monospaced typeface introduces a more technical layer, subtly referencing the production workflows and CGI processes at the core of Bisous’ creative practice.

The color palette intentionally remains restrained and minimal, allowing the imagery and motion to define the emotional tone of the experience.

Technology Stack

The project was built with a lightweight and flexible technical stack designed to support high-end motion and immersive navigation.

Stack

  • WordPress
  • GSAP
  • Custom Vimeo Player Integration

GSAP played a central role in creating fluid transitions and seamless motion interactions throughout the website, while the custom Vimeo player allowed us to maintain full visual consistency and control over the video experience.

Cinematic Loader

The introduction sequence was designed as a cinematic immersion into the Bisous universe.

A succession of carefully curated visuals appears during the loading phase, immediately establishing the visual language and atmosphere of the website. Beyond its aesthetic role, this sequence also serves as the foundation for the homepage slider, creating continuity between the loading experience and the main navigation flow.

The result feels less like a traditional loading screen and more like the opening scene of a visual narrative.

Slider Home

On the homepage, we implemented a full-screen vertical slider designed to immerse users directly into the projects.

The navigation is enhanced through infinite scrolling in both vertical directions, creating a fluid and uninterrupted exploration experience. This mechanic reinforces the feeling of continuously moving through a visual gallery rather than browsing isolated pages.

For project titles, we explored the idea of collaboration by combining the Bisous name with the name of each featured client or project, emphasizing the dialogue between studio and brand.

Title Animation

To introduce motion in a subtle and sophisticated way, we designed a custom text appearance animation based on randomized opacity transitions occurring letter by letter.

The effect remains intentionally restrained yet organic, echoing the imperfections and procedural nature often found in 3D rendering and digital experimentation.

This micro-animation language adds life to the interface without ever distracting from the content itself.

Works Navigation

To allow users to move quickly between projects, we designed a secondary navigation system inspired by technical user interfaces and production software aesthetics.

Rather than directly replicating these visual codes, we reinterpreted them through the project’s editorial and minimalist direction. The resulting interface feels both functional and cohesive, almost resembling labeled production tags integrated naturally within the visual system.

Continuous “Next Project” Experience

At the bottom of each project page, we introduced a continuous transition system that seamlessly leads users into the next work.

The goal was to maintain immersion and encourage uninterrupted exploration. Instead of creating abrupt navigation breaks, the transition feels fluid and almost imperceptible, as if the website itself continuously unfolds from one project to another.

This approach transforms browsing into a more instinctive and cinematic experience.

Easter Eggs & Micro-Interactions

For menu interactions and link hover states, we extended the project’s visual language through subtle randomized letter transformations.

Hidden within these interactions are letters extracted from the word “Bisous,” discreetly integrated as small easter eggs throughout the interface. These details reinforce the playful and experimental identity of the studio while rewarding attentive users with moments of discovery.

Who We Are

We are a digital studio thriving at the intersection of storytelling, technology, and visual precision.

For Bisous, our ambition was not simply to design a portfolio website, but to craft an experience capable of translating the studio’s artistic sensitivity into an immersive digital language. Through minimalist layouts, editorial composition, and carefully orchestrated motion, the platform becomes an extension of their visual universe itself.

We believe the strongest digital experiences are the ones that feel alive, minimal, intentional, and deeply expressive.

Beaucoup

Interactive experience studio. Branding. Website. Experience.

Creative Spotlights

Inside the journeys and portfolios of today's most inspiring designers and developers.

Studio Stories

Discover how studios & agencies started, how they work, and what they've built.

Case Studies

Discover the ideas, design, and craft behind today’s most inspiring web experiences.