Case Research: Ciel Rose | Codrops

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 placing cinematography, giving every mission a powerful visible identification.

For his or her portfolio, the aim 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 wished to strike the correct stability between letting their tasks converse for themselves and making the navigation really feel easy and fascinating.

Design & Artwork Route

Inspiration & Artwork Route

For Ciel Rose, the aim was to maintain the main focus solely on the consumer’s belongings—minimalistic however impactful. The identify 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 give attention to deformations as a key visible and interactive component.

Exploring on Figma

I began by testing completely different deformation concepts in Figma, serious about how one can combine them seamlessly into the hero part. The aim was to maintain it easy and fluid, so we selected a scroll-based slider deformation for the homepage. The gradients had been additionally fastidiously built-in in a delicate method.

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 number of iteration, typically 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 doable.

Tech Stack

For this mission, I used my very own boilerplate, which was impressed by Bizarro’s setup. This gave me full management over each facet of the event course of. It was additionally an awesome studying alternative, serving to me higher perceive complicated 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 improvement 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

All the 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, all the things was fastidiously deliberate to make sure they’d full management over how their visuals are offered.

Web page Transitions

One of many key elements of this mission was guaranteeing seamless web page transitions whereas conserving video as the point of interest. The aim 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 provide easy transitions, however since I already had a transparent imaginative and prescient of what I wished to attain and wished a deeper understanding of how transitions work, I made a decision to create my very own customized router.

Right here’s what it seemed 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 sort of web page change (ex: Dwelling to mission..). 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 acceptable one.

This method is probably not probably the most typical, however it allowed me to realize a greater grasp of how one can animate every component 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 subsequent 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 challenge. The movies had been customary 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 could be faraway from the DOM, inflicting the WebGL texture to be misplaced.

Whereas shopping different web sites utilizing WebGL and video, I got here throughout Grégory Lallé and Thomas Monavon’s unimaginable work on the Angus Emmerson portfolio (test it out if you happen to didn’t but!).

The Trick

To unravel this, I wanted a approach to persist the video texture throughout web page modifications. The method was to create a video component and not using a supply at first.

The trick was easy:

• On hover or click on of a mission’s video, it could retrieve its src URL and apply it to a worldwide persistent video component.
• This world video component wasn’t connected to any explicit web page, guaranteeing 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 boost web page transitions, guaranteeing a easy and seamless expertise whereas sustaining the mission movies as the point of interest. By leveraging WebGL, I used to be capable of management how components blended and animated between pages in a method that wouldn’t be doable with conventional CSS or JavaScript alone.

How It Was Used

WebGL components had been positioned on high 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() operate to regulate how completely different components of the airplane react to motion.

• Fullscreen Growth – The video airplane expands fullscreen whereas animating its Z place, making a easy in-and-out impact.
• Non-Uniform Deformation – As an alternative of shifting 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 delicate 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 beautiful delicate and easy method ensured the movies remained on the coronary heart of the expertise whereas including a refined and immersive transition between tasks.

A few of the animations utilizing shaders:

Remaining Phrases

In the long run, this mission 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 assist 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.