3d-сцены

Объёмная карточка

Тактильная UI-карточка, которая наклоняется, ловит свет и мягко возвращается в исходное положение.

Custom hook3D transforms

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

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

Prompt для GPT

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

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

React-компонент

Объёмная карточка

'use client';

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

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

  return (
    <div ref={ref} style={{ transform: `perspective(1200px) rotateX(${y * -16}deg) rotateY(${x * 18}deg)` }}>
      Tilt me
    </div>
  );
}