эффекты

Глитч-ховер

Эффект hover для карточек, который добавляет хроматический сдвиг, сканлайны и размытие.

CSS ModulesFramer Motion

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

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

Prompt для GPT

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

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

React-компонент

Глитч-ховер

'use client';

export function DistortionHover() {
  return (
    <div className="group relative overflow-hidden rounded-[24px] border border-white/10">
      <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(187,255,0,0.35),transparent_60%)] opacity-0 transition group-hover:opacity-100" />
      <div className="aspect-[4/5] bg-neutral-900 transition duration-300 group-hover:scale-105 group-hover:blur-[2px]" />
    </div>
  );
}