ANIMATION LIBRARY // TILDA + NEXT

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

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

Создай современную веб-анимацию «Drag Slider» для Next.js и React. Нужен эффект: горизонтальная галерея в духе apple с прямым перетаскиванием. Используй GSAP Draggable, Pointer UX, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Morphing Gallery» для Next.js и React. Нужен эффект: превью из сетки плавно превращаются в полноэкранный hero-кадр. Используй Framer Motion, Shared layout, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Reveal on Scroll» для Next.js и React. Нужен эффект: маскированный reveal текста и изображений для премиальных секций. Используй GSAP, ScrollTrigger, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

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

Создай современную веб-анимацию «Distortion Hover» для Next.js и React. Нужен эффект: hover-состояние с glitch-слоями, blur-всплесками и псевдо-шейдерным искажением. Используй CSS Modules, Framer Motion, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

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

Создай выразительную 3D-анимацию «3D Product Viewer» для Next.js и React. Нужен эффект: hero-объект вращается в реальном времени по оси y и доступен для orbit. Используй Three.js, @react-three/fiber, OrbitControls, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

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

Создай выразительную 3D-анимацию «3D Sphere of Images» для Next.js и React. Нужен эффект: двадцать изображений собраны в вращающуюся сферу с drag-управлением. Используй Three.js, Drag rotation, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай выразительную 3D-анимацию «Auto-Rotation Cube» для Next.js и React. Нужен эффект: настоящий 3d-куб с управляемой скоростью вращения. Используй Three.js, Interactive controls, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Before / After Reveal» для Next.js и React. Нужен эффект: сравнение двух состояний через draggable-разделитель. Используй React state, Pointer events, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Stacked Cards Carousel» для Next.js и React. Нужен эффект: стопка карточек перелистывается как компактная презентация кейсов. Используй Framer Motion, State machine, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

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

Создай современную веб-анимацию «Split Text Reveal» для Next.js и React. Нужен эффект: заголовок собирается по словам с выразительным stagger-ритмом. Используй Framer Motion, Stagger, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Text Scramble» для Next.js и React. Нужен эффект: текст проходит через цифровой шум и собирается в итоговую фразу. Используй React effects, Typography motion, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

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

Создай современную веб-анимацию «Horizontal Scroll Gallery» для Next.js и React. Нужен эффект: галерея движется по горизонтали как интерактивная монтажная лента. Используй Framer Motion, Range control, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Accordion Reveal» для Next.js и React. Нужен эффект: аккордеон плавно раскрывает секции и держит ритм контента. Используй Framer Motion, Layout animation, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

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

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

Создай современную веб-анимацию «Clip Path Unveil» для Next.js и React. Нужен эффект: карточки раскрываются через clip-path как графические шторки. Используй Framer Motion, Clip-path, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

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

Создай современную веб-анимацию «Ribbon Wave Slider» для Next.js и React. Нужен эффект: карточки движутся лентой и пульсируют по волне, как живой showreel. Используй Framer Motion, Loop motion, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Orbit Thumbnail Slider» для Next.js и React. Нужен эффект: миниатюры вращаются по кругу вокруг активного кадра как интерфейс orbital-галереи. Используй Framer Motion, Polar layout, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Shutter Panels Slider» для Next.js и React. Нужен эффект: кадр раскрывается вертикальными шторками, создавая монтажный переход между слайдами. Используй Framer Motion, Panel choreography, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Spotlight Stage Slider» для Next.js и React. Нужен эффект: активная карточка выходит под прожектор, а соседние сцены остаются в полутени. Используй Framer Motion, Focus states, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

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

Создай современную веб-анимацию «Pixel Fall Text» для Next.js и React. Нужен эффект: буквы собираются из падающих пиксельных колонок как цифровой билборд. Используй Framer Motion, Typography motion, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Radial Burst Hover» для Next.js и React. Нужен эффект: при наведении из центра расходится лучевой burst, усиливая cta и hover-состояние. Используй Framer Motion, Hover states, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Waveform Equalizer» для Next.js и React. Нужен эффект: вертикальные бары живут как аудиоволна и задают непрерывный музыкальный ритм интерфейсу. Используй Framer Motion, Interval animation, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Liquid Blob Button» для Next.js и React. Нужен эффект: под кнопкой текут световые blob-формы, превращая cta в живой объект. Используй Framer Motion, Blob morphing, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

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

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

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

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

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

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

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

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

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

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

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

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

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

Создай современную веб-анимацию «Swipe Stack Slider» для Next.js и React. Нужен эффект: стек карточек перелистывается как tactile deck с выразительным направленным движением. Используй Framer Motion, AnimatePresence, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Film Strip Slider» для Next.js и React. Нужен эффект: активный кадр раскрывается сверху, а внизу остаётся живая плёнка миниатюр. Используй React state, Thumbnail navigation, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Center Mode Carousel» для Next.js и React. Нужен эффект: центральная карточка доминирует по масштабу, а соседние формируют глубину и контекст. Используй Framer Motion, Scale choreography, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

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

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

Создай современную веб-анимацию «Peek Ahead Slider» для Next.js и React. Нужен эффект: основной кадр показывает фокус, а боковые превью подсказывают следующий шаг. Используй React state, Preview rail, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Vertical Curtain Slider» для Next.js и React. Нужен эффект: кадры сменяются вертикальными полотнами, как сценические шторы или редакционный reveal. Используй Framer Motion, Panel reveal, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Timeline Frame Slider» для Next.js и React. Нужен эффект: контент переключается по шагам временной шкалы, сохраняя ощущение сценарной сборки. Используй Framer Motion, Step navigation, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Glass Tabs Slider» для Next.js и React. Нужен эффект: стеклянные вкладки переключают сцены как интерфейс премиального дашборда. Используй React state, Backdrop blur, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

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

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

Создай современную веб-анимацию «Signal Bars Loader» для Next.js и React. Нужен эффект: вертикальные бары пульсируют как live-сигнал или аудиометр интерфейса. Используй Framer Motion, Loop animation, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

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

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

Создай современную веб-анимацию «Staggered Pill Menu» для Next.js и React. Нужен эффект: pill-элементы появляются каскадом и собирают навигацию в аккуратный ритмичный модуль. Используй Framer Motion, Stagger, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

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

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

Создай современную веб-анимацию «Echo Ripple Button» для Next.js и React. Нужен эффект: кнопка отправляет серию echo-ripple волн и выглядит как активный signal beacon. Используй Framer Motion, Ripple timing, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Ticker Flip Board» для Next.js и React. Нужен эффект: слова сменяются как механическое табло или редакционный digital ticker. Используй Framer Motion, Text transitions, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

Создай современную веб-анимацию «Terminal Type Loop» для Next.js и React. Нужен эффект: строки печатаются в цикле как терминальный prompt и поддерживают техно-атмосферу блока. Используй React effects, Typewriter loop, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.