3d-сцены

Парящие кольца

Трёхмерный декоративный блок для технологичных hero-секций, студийных шоукейсов и immersive-заставок.

Framer Motion3D transforms

Подробнее и перенос

Здесь собраны живое демо, prompt для генерации похожего решения и готовый React-сниппет для переноса в HTML embed или кастомный блок Tilda.

Prompt для GPT

Готовая формулировка для генерации похожего эффекта

Создай выразительную 3D-анимацию «Парящие кольца» для Next.js и React. Нужен эффект: наклонённые кольца вращаются в глубине, как sci-fi орбитальная система. Используй Framer Motion, 3D transforms, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

React-компонент

Парящие кольца

'use client';

import { motion } from 'framer-motion';

export function FloatingRingsOrbit() {
  return (
    <div className="relative h-80 rounded-[28px] border border-white/10 [perspective:1200px]">
      {[0, 1, 2].map((ring) => <motion.div key={ring} animate={{ rotateZ: 360 }} transition={{ duration: 8 + ring * 2, repeat: Infinity, ease: 'linear' }} className="absolute left-1/2 top-1/2 rounded-full border border-lime-300/45" />)}
    </div>
  );
}