3d-сцены
Built by Luneka Lab digital agency

Glass Cube Stack

Хорошо работает в продуктовых витринах и интерфейсных шоукейcах с ощущением глубины.

Custom hook3D layering
Готовый сниппет для переноса

У каждой демки есть React-компонент, который можно скопировать и адаптировать под HTML embed или кастомный блок в Tilda. Библиотека собрана Luneka Lab как showroom motion-подходов для клиентских сайтов.

Написать намРаботать с нами
Назад в библиотеку
Загрузка сцены
React component

Glass Cube Stack

'use client';

import { motion } from 'framer-motion';
import { useRef } from 'react';
import { useMousePosition } from '@/hooks/useMousePosition';

export function GlassCubeStack() {
  const ref = useRef<HTMLDivElement>(null);
  const { x, y } = useMousePosition(ref);

  return [0, 1, 2].map((layer) => <motion.div key={layer} ref={layer === 0 ? ref : undefined} animate={{ rotateX: y * -(10 + layer * 2), rotateY: x * (12 + layer * 2) }} />);
}