Ciel Rose is a France-based creative duo made up of a director and a director of images. They create promotional movies for manufacturers like Decathlon and Electro Dépôt, in addition to music movies for artists.
Their work is all about mixing storytelling with putting cinematography, giving every undertaking a robust visible identification.
For his or her portfolio, the purpose was to design a web site that feels easy and immersive whereas staying true to their universe. The actual problem was to craft a novel expertise that enhances their work with out taking the highlight away from it. We needed to strike the fitting steadiness between letting their tasks communicate for themselves and making the navigation really feel easy and interesting.
Design & Artwork Route
Inspiration & Artwork Route
For Ciel Rose, the purpose was to maintain the main target solely on the shopper’s property—minimalistic however impactful. The title Ciel Rose (which refers to dawn and sundown) naturally led me to discover gradient-based visuals that subtly signify these moments with out feeling too overdone or cliché. For the interplay design, I used to be closely impressed by Angus Emmerson’s portfolio, Thomas Monavon, Greg Lallé, and Design Embraced, which led me to concentrate on deformations as a key visible and interactive aspect.
Exploring on Figma
I began by testing completely different deformation concepts in Figma, enthusiastic about the best way to combine them seamlessly into the hero part. The purpose was to maintain it easy and fluid, so we selected a scroll-based slider deformation for the homepage. The gradients had been additionally rigorously built-in in a refined means.
Prototyping in After Results
As soon as the Figma design was finalized, I moved to After Results to refine the animations and interactions. There was a variety of iteration, usually switching again to Figma as new concepts emerged through the animation course of. I centered on adjusting the easings to make sure that each interplay felt cohesive and fluid, making the general navigation as easy as potential.
Tech Stack
For this undertaking, I used my very own boilerplate, which was impressed by Bizarro’s setup. This gave me full management over each side of the event course of. It was additionally a terrific studying alternative, serving to me higher perceive advanced ideas like web page transitions.
All animations utilizing WebGL had been utilized to planes that blended seamlessly into the DOM, creating easy and immersive results.
The primary applied sciences used:
- Vite.js for quick growth and bundling
- SCSS for styling flexibility and maintainability
- Node.js for server-side logic
- WebGL with three.js
- Easy scroll with Lenis
- Prismic as a headless CMS
The whole web site content material is editable inside Prismic. It was important to offer Ciel Rose the pliability to handle their portfolio, add new tasks, and alter content material as wanted. For the reason that format of photographs (1:1, 3:2, and so forth.) performs a key function in showcasing their work correctly, the whole lot was rigorously deliberate to make sure that they had full management over how their visuals are offered.
Web page Transitions
One of many key features of this undertaking was making certain seamless web page transitions whereas maintaining video as the focus. The purpose was to create an immersive expertise the place navigation felt fluid and pure, with out disrupting the visible storytelling.
When researching instruments for dealing with web page transitions, I explored Barba.js, Freeway.js, and Taxi.js. These libraries supply easy transitions, however since I already had a transparent imaginative and prescient of what I needed to attain and needed a deeper understanding of how transitions work, I made a decision to create my very own customized router.
Right here’s what it appeared like:
export default class TransitionWatcher {
constructor() {
this.transition = null;
}
handleTransition(previousPage, newPage, canvas) {
if (isMobile) {
this.transition = new TransitionGlobal({ lastTemplate: previousPage, nextTemplate: newPage });
return;
}
const key = `${previousPage}-${newPage}`;
Presets
swap (key) {
case 'about-projets':
this.transition = new TransitionAboutToProjet();
break;
case 'projet-projets':
this.transition = new TransitionProjetToProjet();
break;
case 'home-projets':
this.transition = new TransitionHomeToProjet();
break;
case 'projet-home':
if (canvas.dwelling) this.transition = new TransitionProjetToHome();
break;
default:
this.transition = new TransitionGlobal({ lastTemplate: previousPage, nextTemplate: newPage });
}
}
async canvasOut(previousCanvasState, currentCanvas, previousPageState) {
await this.transition?.canvasOut(previousCanvasState, currentCanvas, previousPageState);
}
async pageOut(previousPageState) {
await this.transition?.pageOut(previousPageState);
}
async canvasIn(currentCanvas, template) {
await this.transition?.canvasIn(currentCanvas, template);
}
async pageIn(nextPageState) {
await this.transition?.pageIn(nextPageState);
}
}
At its core, I structured the system round devoted transition lessons for every kind of web page change (ex: Dwelling to undertaking..). By default, the worldwide transition with the descale impact is used, however relying on the route and the machine, the transition dynamically switches to probably the most applicable one.
This method is probably not probably the most standard, but it surely allowed me to achieve a greater grasp of the best way to animate every aspect easily throughout transitions.
Every transition class is constructed round 4 key strategies:
- canvasOut() → Handles the exit animation of WebGL components
- pageOut() → Manages the outro animation of DOM components from the present web page
- canvasIn() → Controls the intro animation of the WebGL components for the following web page
- pageIn() → Brings within the DOM components of the brand new web page
This separation helped me preserve issues modular and versatile, making it simpler to fine-tune every transition independently.
Dealing with Video Persistence Throughout Web page Transitions
Whereas I used to be engaged on the transitions, I encountered a significant concern. The movies had been commonplace HTML DOM components, however I used to be utilizing Three.js to render them as textures inside my WebGL scene. For the reason that video textures relied on the src of the DOM video components, when altering pages, the corresponding video components can be faraway from the DOM, inflicting the WebGL texture to be misplaced.
Whereas searching different web sites utilizing WebGL and video, I got here throughout Grégory Lallé and Thomas Monavon’s unbelievable work on the Angus Emmerson portfolio (test it out for those who didn’t but!).
The Trick
To unravel this, I wanted a option to persist the video texture throughout web page adjustments. The method was to create a video aspect with out a supply at first.
The trick was easy:
- On hover or click on of a undertaking’s video, it will retrieve its
srcURL and apply it to a world persistent video aspect. - This international video aspect wasn’t hooked up to any specific web page, making certain that its supply remained obtainable all through navigation.
- On click on, when the web page transition begins, I might simply combine() the earlier and present video textures in my shader to mix easily from the earlier video to the brand new one.
vec4 video = combine(previousVideoTexture, currentVideoTexture, transitionProgress);This ensured a seamless fade between movies, sustaining visible continuity all through navigation.
There could also be different methods to deal with this downside, and I’d be curious to listen to completely different approaches!
Visible Results & Shader Experiments
Why Shaders?
Shaders had been primarily used to reinforce web page transitions, making certain a easy and seamless expertise whereas sustaining the undertaking movies as the focus. By leveraging WebGL, I used to be capable of management how components blended and animated between pages in a means that wouldn’t be potential with conventional CSS or JavaScript alone.
How It Was Used
WebGL components had been positioned on prime of the DOM components, permitting for easy mixing results.
Shaders performed a key function in creating easy and immersive web page transitions. The primary impact used when switching between tasks concerned a perspective-based deformation, leveraging the size() perform to regulate how completely different components of the airplane react to motion.
- Fullscreen Enlargement – The video airplane expands fullscreen whereas animating its Z place, making a easy in-and-out impact.
- Non-Uniform Deformation – As an alternative of transferring as a inflexible airplane, the corners of the video arrive barely after the middle by calculating the distance from the airplane’s UV middle. This refined warping makes the movement really feel extra natural.
- Dynamic Stickiness – A mixture of positional changes and managed easing (
combine()) permits the transition to really feel fluid whereas sustaining visible coherence.
This gorgeous refined and easy method ensured the movies remained on the coronary heart of the expertise whereas including a refined and immersive transition between tasks.
A number of the animations utilizing shaders:
Remaining Phrases
In the long run, this undertaking was about extra than simply making a portfolio—it was about translating Ciel Rose’s cinematic language into an interactive format that feels alive and intuitive. Each visible and technical resolution was made with care, aiming to help their storytelling with out overshadowing it. The result’s a digital house that displays their distinctive universe whereas giving them the pliability to evolve and develop. We hope it does justice to their imaginative and prescient.
