Floating Blob

Парящий деформирующийся 3D-блоб с металлическим материалом — настоящий WebGL на React Three Fiber + drei.

threeautospringadvanced~175 КБreduced-motion ✓

↗

Установка

npx shadcn@latest add https://motiva.pages.dev/r/floating-blob.json

зависимости: three@^0.185.1 · @react-three/fiber@^9.6.1 · @react-three/drei@^10.7.7

Что нужно в проекте до установки

components.json в корне — с алиасами в форме"components": "@/components". Нет файла — CLI не поймёт, куда класть.
Алиас @ объявлен дважды: "paths": {"@/*": ["./src/*"]} в корневом tsconfig.json (в Vite он часто содержит только references — тогда CLI создаёт папку@) и resolve.alias в конфиге сборщика.
Токены подключены один раз на приложение:import "@/styles/motiva-tokens.css" — они приезжают вместе с записью. Без них секция потеряет цвета, ритм и тему.
Своя типографика не должна спорить: если у вас на обёрткеtext-align: center, он протечёт внутрь блоков.
Проект без TypeScript? Всё равно нужен минимальныйtsconfig.json с pathsи "tsx": true в components.json: CLI грузит tsconfig безусловно, а с "tsx": false идёт за jsconfig.json и падает так же. Приехавший рядом.tsx можно не трогать — вам нужен.vanilla.js.

Экспорт

↓ Скачать .zip

Код

"use client";

import { Canvas } from "@react-three/fiber";
import { Float, MeshDistortMaterial } from "@react-three/drei";

/** Парящий деформирующийся 3D-блоб (React Three Fiber + drei). `?noanim`/data-shot → стоп-кадр. */
export function FloatingBlob() {
  const frozen =
    typeof document !== "undefined" && document.documentElement.hasAttribute("data-shot");

  return (
    <div style={{ position: "absolute", inset: 0 }}>
      <Canvas camera={{ position: [0, 0, 4], fov: 45 }} frameloop={frozen ? "demand" : "always"} dpr={[1, 2]}>
        <ambientLight intensity={0.6} />
        <directionalLight position={[3, 3, 4]} intensity={1.4} />
        <directionalLight position={[-4, -2, 2]} intensity={0.5} color="#38bdf8" />
        <Float speed={frozen ? 0 : 2} rotationIntensity={1.2} floatIntensity={1.6}>
          <mesh>
            <sphereGeometry args={[1.1, 64, 64]} />
            <MeshDistortMaterial color="#8b5cf6" distort={0.4} speed={frozen ? 0 : 2.2} roughness={0.15} metalness={0.2} />
          </mesh>
        </Float>
      </Canvas>
    </div>
  );
}

Floating Blob

Установка

Экспорт

Код

Похожие эффекты