from fastapi import FastAPI from fastapi.responses import HTMLResponse app = FastAPI() HTML_PAGE = """ LiquidUI v2.0 — 40+ Жидких Эффектов
v2.0 · 40+ Effects · Zero Dependencies

LiquidUI

Первая в мире библиотека жидких интерфейсов. От эластичных кнопок до голограмм — просто добавь класс.

scroll
01-05 — Elastic Family

Эластичные элементы

Физика упругости: сжатие, растяжение, пружинный отскок.

elastic-btn
bounce-btn
pulse-btn
wobble-btn
jelly-intense + goo
06-10 — Morphing Shapes

Живые формы

Органичная трансформация границ через CSS и clip-path.

🫧
morph-blob
🔷
morph-square
💧
liquid-shape
🦠
amoeba + goo
11-15 — Glass Effects

Стеклянные панели

Backdrop-filter магия: frosted, chrome, neon glass.

Frosted

Размытие + насыщенность

glass-frost

Dark Glass

Тёмное стекло

glass-dark

Gradient

Градиентное стекло

glass-gradient

Chrome

Хромированное

glass-chrome

Neon Glass

Неоновое свечение

glass-neon
16-20 — Magnetic Attraction

Магнитное притяжение

Элементы тянутся к курсору с разной силой и физикой.

Наведи на кнопки — они притянутся к мыши
21-25 — Ripple & Waves

Волны и рябь

Кликай — создавай волны разных цветов и интенсивности.

White Ripple

ripple

Dark Ripple

ripple-dark

Color Ripple

ripple-color

Glow Ripple

ripple-glow

Multi Ripple

ripple-multi
26-30 — 3D Tilt

3D наклон и блики

Карточки реагируют на мышь с параллаксом и бликами.

Basic 3D

tilt-3d

With Glare

tilt-glare

Parallax

Layer 1

tilt-parallax

Mirror

tilt-mirror
31-35 — Particle Effects

Частицы и свечение

Микро-анимации: всплывающие частицы, орбиты, искры.

Float Up

particle-float

Orbit

particle-orbit

Mouse Trail

particle-trail (hover)

Sparkle

particle-sparkle

Dust Field

particle-dust
36-40 — Glitch & Retro

Глитч и ретро-эффекты

Цифровые артефакты: глитч, сканлайны, CRT, голограммы.

Glitch

glitch-hover

Scanlines

scanline

CRT Monitor

crt

Hologram

hologram

Neon Pulse

neon-pulse
41-45 — Text Effects

Анимированный текст

Буквы танцуют: волны, градиенты, тени, свечение.

WAVE

text-wave

SHAKE

text-shake (hover)

GRADIENT

text-gradient

GLOW

text-glow

3D TEXT

text-3d
46-50 — Interactive

Интерактивные жесты

Перетаскивание, перевороты, сжатие, вращение.

Drag Me

Elastic drag

drag-elastic

Squeeze

squeeze-hover

Flip

Hover to flip

Back!

flip-hover

Rotate

rotate-hover

Skew

skew-hover
BONUS — Combos

Комбинированные эффекты

Сочетай классы для уникальных результатов.

Glass + Morph

glass-frost morph-blob

Magnetic + Tilt + Neon

magnetic tilt-3d neon-pulse

Ripple + Sparkle + Hologram

ripple particle-sparkle hologram

Elastic + Gradient + Bounce

elastic-btn text-gradient bounce-btn
API

Как использовать

<!-- Подключи CSS (или скопируй в свой) --> <link rel="stylesheet" href="liquidx.css"> <!-- Добавь классы к элементам --> <button class="elastic-btn">Кнопка</button> <div class="morph-blob glass-frost">...</div> <div class="magnetic tilt-3d">...</div> <!-- Доступные эффекты (40+) --> ELASTIC: elastic-btn, bounce-btn, pulse-btn, wobble-btn, jelly-intense MORPH: morph-blob, morph-square, liquid-shape, amoeba GLASS: glass-frost, glass-dark, glass-gradient, glass-chrome, glass-neon MAGNETIC: magnetic, magnetic-strong, magnetic-elastic, magnetic-smooth, magnetic-snap RIPPLE: ripple, ripple-dark, ripple-color, ripple-glow, ripple-multi TILT: tilt-3d, tilt-glare, tilt-parallax, tilt-mirror PARTICLES: particle-float, particle-orbit, particle-trail, particle-sparkle, particle-dust GLITCH: glitch-hover, scanline, crt, hologram, neon-pulse TEXT: text-wave, text-shake, text-gradient, text-glow, text-3d INTERACTIVE: drag-elastic, squeeze-hover, flip-hover, rotate-hover, skew-hover
""" @app.get("/", response_class=HTMLResponse) async def root(): return HTML_PAGE if __name__ == "__main__": import uvicorn uvicorn.run(app, host="0.0.0.0", port=7860)