✨ Vytrix

• Github
• npm

Vytrix is a ultra-lightweight, highly modular, and tree-shakable animation library for modern web applications. Vytrix는 모던 웹을 위한 초경량, 고모듈화, Tree-shaking 지원 애니메이션 라이브러리입니다.

🚀 Why Vytrix? (왜 Vytrix인가요?)

• Zero Heavy Bundle (가벼운 용량): 필요한 애니메이션 모듈만 임포트(import)하면, 사용하지 않는 코드는 빌드 시 완전히 제거됩니다(Tree-shaking).
• Zero CSS File Setup (설정 제로): 별도의 .css 파일을 불러올 필요 없이, 자바스크립트 엔진이 필요한 스타일을 브라우저 헤더에 알아서 동적으로 주입합니다.
• Framework Agnostic (프레임워크 독립적): Vanilla JS, TypeScript 뿐만 아니라 React, Vue 등 어떤 환경에서도 DOM 엘리먼트만 있으면 곧바로 동작합니다.

📦 Installation (설치)

Currently available as a local workspace or via your package registry: (로컬 패키지 또는 레지스트리를 통해 설치할 수 있습니다.)

npm install vytrix

📖 Syntax & API Reference (상세 문법 및 API 가이드)

Vytrix is divided into granular modules to maximize performance. (Vytrix는 성능 극대화를 위해 기능별로 모듈이 세분화되어 있습니다.)

🎬 Core Animations

1. Fade Animations (fade)

Handles smooth opacity transitions. (요소의 투명도 전환을 처리합니다.)

import { fade } from 'vytrix'; // or import { fade } from 'vytrix/dist/animations/fade.js';

const box = document.getElementById('my-box');

fade.in(box);  // Fade In (Appear)
fade.out(box); // Fade Out (Disappear)

2. Slide Animations (slide)

Handles directional sliding effects. (방향성 슬라이딩 애니메이션을 처리합니다.)

import { slide } from 'vytrix';

const box = document.getElementById('my-box');

slide.up(box);    // Slide up from bottom (아래에서 위로)
slide.down(box);  // Slide down from top (위에서 아래로)
slide.left(box);  // Slide left from right (오른쪽에서 왼쪽으로)
slide.right(box); // Slide right from left (왼쪽에서 오른쪽으로)

3. Zoom Animations (zoom)

Handles scaling effects. (확대/축소 효과를 처리합니다.)

import { zoom } from 'vytrix';

const box = document.getElementById('my-box');

zoom.in(box);  // Scale up and fade in (확대되며 등장)
zoom.out(box); // Scale down and fade out (축소되며 퇴장)

4. Attention & Motion (attention)

Handles eye-catching feedback animations. (시선을 사로잡는 인터랙션 효과를 처리합니다.)

import { attention } from 'vytrix';

const box = document.getElementById('my-box');

attention.shake(box);  // Shake horizontally (좌우로 흔들림 - 에러 등에 유용)
attention.pulse(box);  // Gentle heartbeat pulse (두근거리는 펄스 효과)
attention.spin(box);   // Continuous 360-degree rotation (무한 회전)

💥 Advanced Entrances & 3D

5. Dynamic Entrances (bounce, rotate, reveal)

Adds dynamic physical motion to entrances. (물리적이고 역동적인 등장 모션을 추가합니다.)

import { bounce, rotate, reveal } from 'vytrix';

const box = document.getElementById('my-box');

bounce.in(box);    // Bounces into place (통통 튀며 등장)
rotate.in(box);    // Rotates into place (회전하며 등장)
reveal.left(box);  // Reveals with a masking effect (마스크가 벗겨지며 등장)

6. 3D Space Animations (flip)

Handles 3D perspective transformations. (3D 공간에서 카드가 뒤집히는 효과를 처리합니다.)

import { flip } from 'vytrix';

const card = document.getElementById('my-card');

flip.x(card); // Flip vertically on X-axis (위아래로 뒤집기)
flip.y(card); // Flip horizontally on Y-axis (좌우로 뒤집기)

✨ Heavy UI Effects

7. Visual Effects (neon, glass, glitch, gradient, float)

Applies heavy, complex CSS effects with a single function. (길고 복잡한 CSS 효과를 함수 하나로 단번에 적용합니다.)

import { neon, glass, glitch, gradient, float } from 'vytrix';

const element = document.getElementById('my-element');

neon.blue(element);    // Cyberpunk breathing neon glow (사이버펑크 네온사인 빛 번짐)
glass.apply(element);  // Apple-style Glassmorphism blur (애플 스타일 글래스모피즘)
glitch.apply(element); // Cyber-attack glitch distortion (에러/해킹 지지직 효과)
gradient.bg(element);  // Animated moving gradient background (움직이는 그라데이션 배경)
float.apply(element);  // Continuous floating hover (우주 공간에 둥둥 떠다니는 모션)

🎨 Direct CSS Class Usage (CSS 클래스로 직접 사용하기)

If you prefer using pure CSS classes instead of JavaScript function calls, Vytrix classes follow this naming convention: (JS 함수 호출 대신 HTML 클래스명으로 직접 제어하고 싶다면 아래 클래스명을 사용하세요.)

• Fade/Slide/Zoom: vytrix-fade-in, vytrix-fade-out, vytrix-slide-up, vytrix-slide-down, vytrix-slide-left, vytrix-slide-right, vytrix-zoom-in, vytrix-zoom-out
• Attention: vytrix-shake, vytrix-pulse, vytrix-spin
• Advanced Motion: vytrix-bounce-in, vytrix-rotate-in, vytrix-reveal-left, vytrix-flip-x, vytrix-flip-y
• Effects: vytrix-neon-blue, vytrix-glass, vytrix-glitch, vytrix-gradient-bg, vytrix-float Example:

<div class="vytrix-slide-up">Hello Vytrix!</div>
<button class="vytrix-glass vytrix-neon-blue">Cool Button</button>

🛠️ Advanced: Tree-Shaking Import

To get the absolute smallest bundle size, import modules individually: (번들 사이즈를 최소화하려면 필요한 모듈만 개별 임포트하세요.)

import { fade } from 'vytrix/dist/animations/fade.js';
import { glass } from 'vytrix/dist/effects/glass.js';

fade.in(document.getElementById('element'));
glass.apply(document.getElementById('element'));

📄 License

MIT © 2026 cookedas1 & LLL Studio.