SI ACADEMY · MAGNIFICENT 7 MOTION ARENA

Арена живых компонентов

Двадцать три приёма из лучших библиотек анимированного интерфейса, собранные в одном файле. Наводите, нажимайте, тяните узлы. Счётчик FPS вверху показывает, что всё держит частоту экрана.

01Text & Kinetic

REACT BITS · DECRYPTED TEXT · SPLIT TEXT

НАВЕДИТЕ

SUPERINTELLIGENCE

Decrypted Textпосимвольная дешифровка при наведении

Split Text Staggerволновое появление символов

023D Shaders & Depth

ACETERNITY UI · 3D CARD · SPARKLES · LAMP

ДВИГАЙТЕ КУРСОР

SI ACADEMY · PASS

Sovereign
Exocortex

№ 0528 · 2026

3D Tilt Cardperspective 1000px · блик за курсором

Sparkles CoreCANVAS 2D · ЗОЛОТЫЕ ЧАСТИЦЫ

Canvas Sparklesживой генератор микро-частиц

Свет на главном

Lamp Spotlightконус света раскрывается при появлении

03Borders & Beams

MAGIC UI · BORDER BEAM · SHIMMER · NEON

Border Beam

Угол conic-gradient крутится через @property: ноль JavaScript.

Animated Border Beamбегущий луч по периметру

Shimmer Buttonпереливающаяся кнопка действия

LIVEDEPLOYINGREC

Neon Pulse Badgeстатус с пульсирующей точкой

04Haptics & Springs

KOKONUT UI · ANIMATE UI · STIFFNESS 200 · DAMPING 25

НАЖМИТЕ И ОТПУСТИТЕ

Spring Press Buttonнастоящий интегратор пружины

ПОДВЕДИТЕ КУРСОР

Magnetic Buttonпритяжение в радиусе 140px

Синус с атакой 10 мс и затуханием 1,2 с

Web Audio 528 Hzтактильный звуковой отклик

05Bento Architecture

UI LAYOUTS · SKIPER UI · PROXIMITY HOVER

Экзокортексголос, терминал и агенты в одной системе01

Рельсыкрипто-карты и IBAN02

Wispr180 WPM03

Raycastсниппеты04

Remotionвидео кодом05

VideoToolboxаппаратный рендер на M-чипе06

Claude Codeрой в терминале07

Proximity Bentoкурсор подсвечивает рамки соседних ячеек

06Node Topology

REACT VIBE · HUB FLOW · DRAG & PULSE

Hub Flow Nodesтяните узлы · клик запускает импульс по связям

07Scroll & Type

TYPED.JS · MAGIC UI MARQUEE · AOS

АВТОПЕЧАТЬ

Мы автоматизируем

Typewriter Loopпечать, пауза, стирание · как typed.js

НАВЕДИТЕ · ПАУЗА

CLAUDEREMOTIONTHREE.JSGSAPN8NHIGGSFIELDELEVENLABSSUPABASENETLIFYCURSORCLAUDEREMOTIONTHREE.JSGSAPN8NHIGGSFIELDELEVENLABSSUPABASENETLIFYCURSOR

Infinite Marqueeбесконечная лента с маской по краям

08Particles & Physics

PARTICLES.JS · TSPARTICLES · CANVAS-CONFETTI

ВЕДИТЕ КУРСОРОМ

Particle Networkузлы сцепляются линиями, курсор отталкивает

Confetti Burstгравитация, трение, вращение конфетти

09WebGL & Globes

THREE.JS · COBE · SHADERGRADIENT

ТЯНИТЕ ГЛОБУС

Dotted Globeточечная сфера с лавовыми маркерами · как cobe

Lava ShaderWEBGL · FRAGMENT SHADER · 60 FPS

Shader Gradientживой лавовый градиент на GPU

10Micro-UI & Agents

ROUGH NOTATION · SPINKIT · ACETERNITY SPOTLIGHT · CPN AGENT

НАВЕДИТЕ НА СЛОВА

Агенты работают 24/7, закрывают лиды и экономят 80% времени.

Rough Notationрисованные выделения поверх текста

Loader Trioорбита · волна · солнце · как SpinKit

Lead Radarнаходит клиентов

Inbox Agentотвечает за 9 сек

Bookingставит встречи

Contentпубликует 24/7

Spotlight Gridобщий луч света за курсором по сетке карточек

КЛИКНИТЕ НА АГЕНТА

Привет! Я агент CPN 👋

Live Agent Headглаза следят, моргание, реплики · как на главной