✨ Vibe Coding

Vibe Coding
Playground

Создано за 1 день с Claude + Cursor

Next.js 14MotionTailwind v4TypeScript
1день
разработки
5секций
интерактива
∞анимаций
и эффектов

Animations

Motion-анимации: stagger, scroll-trigger, hover-эффекты

Fademotion

Плавное появление через opacity

Slidemotion

Скольжение по оси X

Scalemotion

Масштабирование из центра

Rotatemotion

Вращение с затуханием

Springmotion

Физическая пружина

SVG Pathmotion

Рисование SVG-контуров

Interactivity

Конфетти, морфинг, ripple, drag — сайт живёт

Зона 1 — Кнопки

Зона 2 — Контролы

Glow Slider50
Dark mode
Animations
0

Зона 3 — Drag

Перетащи меня

Отпусти — вернусь на место

Visual Effects

Glassmorphism, glow, градиенты и текстовые эффекты

Glassmorphism

🌫️
Light
bg-white/3, blur-sm
🔮
Medium
bg-white/5, blur-md
💎
Heavy
bg-white/8, blur-lg

Animated Gradient Border

Вращающийся градиентный бордер

CSS @keyframes анимирует позицию фона, создавая эффект непрерывного вращения цветов по периметру.

Glow Pulse

Cyan
Violet
Amber

Text Effects

gradient-text

Gradient

shimmer-text

Shimmer

glitch-text

Glitch

Responsive Design

Переключай устройства — смотри как перестраивается сайт

1280px

320px— Mobile
768px— Tablet
1280px— Desktop