Effets UI avancés · Liquid Glass, 3D et logo animé (React)

🎁 Ce que tu reçois : l'installation et l'usage des 3 librairies qui ajoutent des effets visuels avancés à tes applications React / Next.js, glassmorphism réaliste, 3D, animations liquides.

Stack recommandée : Next.js · React · TypeScript · Tailwind CSS.

🫧 1. Liquid Glass JS

GitHub : github.com/dashersw/liquid-glass-js

Installation

git clone https://github.com/dashersw/liquid-glass-js.git

Ou directement le package s'il est disponible :

npm install liquid-glass-js

Utilisation simple

import LiquidGlass from "liquid-glass-js";

const element = document.querySelector(".glass");

new LiquidGlass(element);

HTML :

<div class="glass">
  Contenu avec effet glass
</div>

CSS :

.glass {
  width: 300px;
  height: 200px;

  background: rgba(255,255,255,0.15);
  border-radius: 24px;
}

Résultat : fond déformé, effet de réfraction, profondeur, rendu type Apple Vision Pro.

🎮 2. React Three Fiber

GitHub : github.com/pmndrs/react-three-fiber

Installation

npm install three @react-three/fiber
npm install @react-three/drei

Créer une scène 3D simple

import { Canvas } from "@react-three/fiber";

export default function Scene() {
  return (
    <Canvas>
      <mesh>
        <boxGeometry />
        <meshStandardMaterial color="orange" />
      </mesh>
      <ambientLight />
    </Canvas>
  )
}

Résultat : un cube 3D interactif rendu directement dans React.

Ajouter une animation

import { useFrame } from "@react-three/fiber";
import { useRef } from "react";

function Cube() {
  const mesh = useRef();

  useFrame(() => {
    mesh.current.rotation.y += 0.01;
  })

  return (
    <mesh ref={mesh}>
      <boxGeometry />
      <meshStandardMaterial color="hotpink" />
    </mesh>
  )
}

Charger un modèle 3D

import { useGLTF } from "@react-three/drei";

function Model() {
  const { scene } = useGLTF("/model.glb");

  return <primitive object={scene} />
}

Tu peux importer des personnages 3D, des produits, des logos, des objets animés.

💧 3. Liquid Logo

GitHub : github.com/paper-design/liquid-logo

Installation

git clone https://github.com/paper-design/liquid-logo.git
npm install
npm run dev

Utilisation

Le projet utilise React, WebGL, des shaders et des animations GPU. La logique principale :

1. Créer une forme SVG ou un logo.
2. Le transformer en texture.
3. Appliquer un shader liquide.
4. Animer la déformation avec la souris.

<LiquidLogo />

Le composant gère ensuite la déformation, les animations et les interactions.

🔥 Combinaison recommandée

Pour une landing page premium :

• Hero : React Three Fiber : objet 3D animé en arrière-plan
• Cartes et boutons : Liquid Glass : effet verre
• Chargement : Liquid Logo : logo vivant

Résultat : une expérience proche des sites d'Apple, Linear, Vercel ou Framer.

Stack finale

npm install three @react-three/fiber @react-three/drei
npm install liquid-glass-js

R3F = structure 3D · Drei = composants prêts à l'emploi · Liquid Glass = finition UI · Liquid Logo = branding animé.

Ces outils ne remplacent pas le design : ils ajoutent les 10 % de détails qui donnent un rendu beaucoup plus premium.