Effecxio
Effecxio

ספריות npm
ל-vibe coders

98 ספריות עם preview חי. לחץ על כל אחת, ראה מה היא עושה, והעתק פרומט מוכן להדביק.

98 ספריות
GSAP
gsap19k
docs ↗

הספרייה הכי חזקה לאנימציות web. ScrollTrigger, timelines, morphing — הכל.

אנימציהscrolltimelineSVG
npm
Framer Motion
framer-motion23k
docs ↗

אנימציות React הכי פשוטות לכתיבה. Gestures, layout animations, shared transitions.

reactאנימציהgestureslayout
npm
Anime.js
animejs49k
docs ↗

ספריית אנימציה קלילה. SVG paths, CSS properties, DOM attributes — בקוד פשוט.

אנימציהSVGCSSקל
npm
Lottie
lottie-web30k
docs ↗

אנימציות After Effects בweb. קבצי JSON קטנים, אנימציות מדהימות.

אנימציהJSONAfter Effectsוקטור
npm
AutoAnimate
@formkit/auto-animate12k
docs ↗

הוסף אנימציות לרשימות ו-DOM בשורת קוד אחת. קסם.

אנימציהרשימותקלאוטומטי
npm
MOTION
Motion One
motion8k
docs ↗

אנימציות web native API מהירות מאוד. קטן (3kb), מודרני, performant.

אנימציהמהירקטןnative
npm
React Spring
@react-spring/web28k
docs ↗

אנימציות physics-based ל-React. Spring, bounce, tension — תחושה פיזית.

reactphysicsspringאנימציה
npm
tsParticles
@tsparticles/react7k
docs ↗

מערכת חלקיקים מלאה. Confetti, snow, fireworks, connections — הכל configurable.

חלקיקיםרקעאפקטיםconfetti
npm
Canvas Confetti
canvas-confetti9k
docs ↗

קונפטי מושלם בלחיצה. קטן, מהיר, ורק עושה דבר אחד — וטוב.

confetticelebrationאפקטכיף
npm
Popmotion
popmotion20k
docs ↗

מנוע אנימציה פרימיטיבי. הבסיס של Framer Motion. גמיש מאוד.

אנימציהפרימיטיביphysicsגמיש
npm
Hello World|
Typed.js
typed.js13k
docs ↗

אפקט הקלדה מציאותי. מקליד ומוחק טקסט בלופ. קלאסי ויעיל.

טקסטהקלדהאפקטhero
npm
SPLIT
Splitting.js
splitting5k
docs ↗

מפצל טקסט לתווים/מילים/שורות לאנימציה. בשילוב GSAP — מדהים.

טקסטsplitGSAPאנימציה
npm
Number Flow
@number-flow/react4k
docs ↗

אנימציית מספרים חלקה ויפה. כמו counter אבל עם character morphing.

מספריםcounterאנימציהמורפינג
npm
1,234
React CountUp
react-countup3k
docs ↗

CountUp אנימציה פשוטה למספרים. מופעלת ב-IntersectionObserver.

מספריםcounterscrollstats
npm
AOS
aos26k
docs ↗

Animate On Scroll — הוסף data-aos לכל element וקיבלת אנימציה.

scrollאנימציהקלdata attributes
npm
Three.js
three102k
docs ↗

3D בבראוזר. WebGL פשוט ואלגנטי. Scenes, materials, lights — הכל.

3DWebGLscenegeometry
npm
React Three Fiber
@react-three/fiber27k
docs ↗

Three.js ב-React declarative. כמו JSX אבל ל-3D.

3DReactThree.jsWebGL
npm
Spline
@splinetool/react-spline1k
docs ↗

הכנס סצנות 3D מ-Spline ישירות לאתר. Drag & drop לweb.

3DSplineinteractiveembed
npm
OGL
ogl4k
docs ↗

WebGL מינימלי ומהיר. אידיאלי לאפקטים ויזואליים ללא overhead.

WebGLמינימלימהיראפקטים
npm
Curtains.js
curtainsjs4k
docs ↗

WebGL על HTML רגיל. הוסף shaders לתמונות וטקסטים בלי לשנות את הHTML.

WebGLshadersתמונותאפקטים
npm
Babylon.js
@babylonjs/core23k
docs ↗

3D engine מלא מMicrosoft. Games, product visualization, AR/VR.

3Dgame engineARVR
npm
Theatre.js
@theatre/core10k
docs ↗

כלי עריכת אנימציות ויזואלי ב-browser. Timeline editor לאנימציות מורכבות.

אנימציהtimelinevisual editor3D
npm
Post Processing
postprocessing4k
docs ↗

אפקטי post-processing ל-WebGL: bloom, glitch, chromatic aberration.

WebGLbloomglitchpost-processing
npm
shadcn/ui
shadcn/ui78k
docs ↗

קומפוננטים יפים ומוכנים. Copy-paste לתוך הפרויקט. לא dependency.

קומפוננטיםTailwindaccessibleפופולרי
npm
Radix UI
@radix-ui/react-dialog15k
docs ↗

Primitives נגישים ל-React. ללא styling — אתה שולט על המראה לגמרי.

accessibleprimitivesheadlessReact
npm
cmdk
cmdk10k
docs ↗

Command palette כמו ב-Linear/Vercel. ⌘K ופותח search מושלם.

searchcommand palettekeyboard⌘K
npm
Vaul
vaul4k
docs ↗

Drawer component ל-mobile. Swipe למטה לסגור — כמו native iOS.

drawermobileswipebottom sheet
npm
Sonner
sonner5k
docs ↗

Toast notifications מושלמות. יפות, סטאקביליות, ועם promise support.

toastnotificationsalertsUX
npm
Embla Carousel
embla-carousel-react6k
docs ↗

Carousel הכי חלק שיש. Touch, mouse drag, infinite scroll — מינימלי ומושלם.

carouselslidertouchdrag
npm
🔥
React Hot Toast
react-hot-toast9k
docs ↗

Toast קל וחמוד. Emoji support, custom styles, ממש פשוט להשתמש.

toastnotificationsקלemoji
npm
Floating UI
@floating-ui/react30k
docs ↗

Tooltips, popovers, dropdowns שנשארים במסך. מטפל בכל edge cases.

tooltippopoverdropdownpositioning
npm
React Select
react-select27k
docs ↗

Select, multi-select, async search — הכל בקומפוננט אחד עשיר.

selectdropdownsearchmulti
npm
Headless UI
@headlessui/react26k
docs ↗

קומפוננטים ללא עיצוב מ-Tailwind team. Accessible, keyboard-friendly.

headlessaccessibleTailwindקומפוננטים
npm
React Aria
react-aria13k
docs ↗

Accessibility hooks מAdobe. הכי מתקדם לנגישות. Calendar, DatePicker ועוד.

accessibilitya11yAdobehooks
npm
Mantine
@mantine/core27k
docs ↗

ספריית UI מלאה ל-React. 100+ קומפוננטים, hooks, forms — הכל.

UI libraryקומפוננטיםhooksforms
npm
Ariakit
@ariakit/react7k
docs ↗

Toolkit נגישות מתקדם. Composable components עם WAI-ARIA מלא.

accessiblecomposableWAI-ARIAheadless
npm
Aceternity UI
aceternity-ui14k
docs ↗

קומפוננטים מדהימים עם אנימציות. Spotlight, cards, typewriter — copy-paste.

אנימציהcopy-pasteeffect componentsמרשים
npm
Magic UI
magic-ui12k
docs ↗

קומפוננטים magical עם אנימציות מרהיבות. Meteors, shimmer, bento grid.

אנימציהmagicalbentoshimmer
npm
Recharts
recharts23k
docs ↗

גרפים ב-React עם SVG. פשוט, Responsive, customizable לחלוטין.

גרפיםSVGReactdashboard
npm
Chart.js
chart.js64k
docs ↗

ספריית גרפים הכי פופולרית. Canvas-based, מהיר, 8 סוגי גרפים.

גרפיםcanvasפופולריdashboard
npm
D3.js
d3109k
docs ↗

ויזואליזציה מתקדמת עם SVG. הכי גמיש שיש — אבל דורש ידע.

ויזואליזציהSVGגרפיםdata
npm
Tremor
@tremor/react16k
docs ↗

Dashboard components מוכנים עם Tailwind. KPIs, charts, tables — מיידי.

dashboardchartsTailwindKPI
npm
visx
@visx/visx19k
docs ↗

ויזואליזציה מ-Airbnb. D3 + React בצורה הכי נכונה. מודולרי לחלוטין.

ויזואליזציהAirbnbD3React
npm
Nivo
@nivo/core13k
docs ↗

גרפים יפים מאוד עם motion. Heatmaps, stream, chord, network.

גרפיםmotionיפהheatmap
npm
ApexCharts
react-apexcharts14k
docs ↗

גרפים interactives עם annotations, zoom, brush. מושלם לdashboards.

גרפיםinteractivezoomdashboard
npm
Victory
victory11k
docs ↗

גרפים composable ל-React ו-React Native. אותו API לשניהם.

גרפיםReact Nativecomposablecross-platform
npm
dnd kit
@dnd-kit/core13k
docs ↗

Drag & drop מודרני ל-React. Performant, accessible, מותאם למובייל.

dragdropsortKanban
npm
React Beautiful DnD
react-beautiful-dnd32k
docs ↗

הDnD הקלאסי מAtlassian. יפה, מוכר, עובד מצוין לKanban boards.

dragKanbanAtlassianקלאסי
npm
React Draggable
react-draggable9k
docs ↗

עשה כל element ניתן לגרירה. פשוט, קטן, עובד.

dragפשוטpositionwidget
npm
Pragmatic DnD
@atlaskit/pragmatic-drag-and-drop2k
docs ↗

Drag & drop מAtlassian הדור הבא. מהיר מאוד, לא מעכב את הthread.

dragAtlassianperformantמודרני
npm
Interact.js
interactjs12k
docs ↗

Drag, resize, multi-touch gestures. עובד עם כל framework.

dragresizegesturestouch
npm
SortableJS
sortablejs29k
docs ↗

Sortable lists פשוטים וחזקים. עובד עם Vue, React, Angular — כולם.

sortdraglistvanilla
npm
Locomotive Scroll
locomotive-scroll8k
docs ↗

Smooth scroll עם parallax. גלילה חלקה כמו butter ואפקטי parallax מובנים.

scrollparallaxsmoothחלק
npm
Lenis
@studio-freight/lenis9k
docs ↗

Smooth scroll קל ומודרני. הדור הבא של locomotive. 3kb.

scrollsmoothקלמודרני
npm
ScrollReveal
scrollreveal22k
docs ↗

אנימציות על scroll בשורה אחת. delay, origin, distance — הכל config.

scrollrevealאנימציהפשוט
npm
React Intersection Observer
react-intersection-observer5k
docs ↗

Intersection Observer API ב-React hook. הבסיס לכל scroll animation.

scrollobserverhooksReact
npm
React Scroll
react-scroll4k
docs ↗

Smooth scroll לאנכורים ב-React. Link שגולל לsection, אינדיקטור מיקום.

scrollanchornavigationsmooth
npm
Parallax.js
parallax-js15k
docs ↗

Parallax עם gyroscope support. גם mouse וגם tilting הטלפון.

parallaxgyroscopemobileאפקט
npm
React Scroll Parallax
react-scroll-parallax2k
docs ↗

Parallax scroll effects ל-React. translateX/Y/scale על scroll — קל.

parallaxscrollReacttransform
npm
Swiper
swiper39k
docs ↗

הslider הכי עשיר שיש. Touch, 3D effects, autoplay, thumbs — הכל.

slidertouchcarousel3D
npm
React Hook Form
react-hook-form42k
docs ↗

Forms ב-React בלי re-renders. המהיר ביותר, הקל ביותר, הפופולרי ביותר.

formsvalidationReacthooks
npm
string
Zod
zod33k
docs ↗

Schema validation ל-TypeScript. מגדיר types ו-validation ביחד.

validationTypeScriptschematypes
npm
Formik
formik33k
docs ↗

ניהול forms ב-React. State, validation, submission — הכל מאורגן.

formsstatevalidationקלאסי
npm
📁
React Dropzone
react-dropzone10k
docs ↗

Drag & drop file upload יפה. Preview תמונות, progress, multiple files.

uploaddragfilesimages
npm
React Colorful
react-colorful3k
docs ↗

Color picker קטן ויפה. 2.8kb, ללא dependencies, touch support.

color pickerקטןיפהtouch
npm
$1,234.56
React Number Format
react-number-format7k
docs ↗

Format מספרים בinputs: מחירים, טלפונים, כרטיסי אשראי — אוטומטי.

numbersformatphonecurrency
npm
🇺🇸
+1 (555) 123-4567
React Phone Input 2
react-phone-input-23k
docs ↗

Phone input עם country picker. Flags, auto-format, validation.

phonecountryflaginput
npm
text
num
bool
TanStack Form
@tanstack/react-form4k
docs ↗

Form library מודרני מTanStack. Type-safe, headless, מהיר מאוד.

formsTypeScriptTanStackמודרני
npm
React Player
react-player9k
docs ↗

Player ל-YouTube, Vimeo, SoundCloud ועוד. קומפוננט אחד לכולם.

videoYouTubeplayeraudio
npm
React Image Crop
react-image-crop4k
docs ↗

Crop תמונות בbrowser. Aspect ratio, zoom, rotate — הכל.

imagecropuploadcanvas
npm
Yet Another Lightbox
yet-another-lightbox2k
docs ↗

Lightbox מושלם לגלריות. Zoom, thumbnails, fullscreen, keyboard.

lightboxgalleryzoomimages
npm
React Zoom Pan Pinch
react-zoom-pan-pinch2k
docs ↗

Zoom ו-pan על כל element. Pinch-to-zoom על מובייל, wheel על desktop.

zoompanpinchtouch
npm
React PDF
@react-pdf/renderer14k
docs ↗

צור PDF ישירות מReact components. Invoice, reports, certificates — בקוד.

PDFgenerateinvoicereport
npm
Fabric.js
fabric28k
docs ↗

Canvas editor מלא. Draw, shapes, text, images — כמו Canva בbrowser.

canvasdraweditorimages
npm
WaveSurfer.js
wavesurfer.js8k
docs ↗

Audio waveform visualizer. Play, seek, zoom — ממשק audio מקצועי.

audiowaveformplayermusic
npm
B
I
U
Tiptap
@tiptap/react28k
docs ↗

Rich text editor מודרני. Headless, extensible, Notion-like experience.

editorrich textNotionextensible
npm
📊
💾
TanStack Query
@tanstack/react-query43k
docs ↗

Server state management. Caching, refetching, optimistic updates — מאגי.

data fetchingcacheserver stateAPI
npm
Store
Zustand
zustand48k
docs ↗

State management קטן ופשוט. ללא boilerplate, ללא context hell.

statestoreקטןפשוט
npm
Jotai
jotai18k
docs ↗

Atomic state management. כל piece of state = atom. מינימלי ומדויק.

stateatomicminimalReact
npm
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
date-fns
date-fns34k
docs ↗

Date utilities מודרני. Format, parse, compare — ללא Moment.js overhead.

datesformatutilityקל
npm
base
active
+
merged
clsx
clsx9k
docs ↗

Conditional classNames בצורה נקייה. clsx('base', isActive && 'active').

classNamesTailwindutilityקטן
npm
5
2
8
1
9
1
2
5
8
9
Lodash
lodash59k
docs ↗

Utility functions לכל דבר. debounce, throttle, deepClone, groupBy — הכל.

utilitydebouncethrottlearrays
npm
Client
API
Axios
axios105k
docs ↗

HTTP client פשוט. Interceptors, cancellation, automatic JSON — קלאסי.

HTTPAPIfetchinterceptors
npm
📍
⏱️
🔔
🖱️
⌨️
📱
react-use
react-use41k
docs ↗

אוסף של 100+ React hooks שימושיים. useLocalStorage, useDebounce, useMedia.

hooksutilitycollectionReact
npm
a: 1
b: 2
a: 1
b: 3
Immer
immer27k
docs ↗

Immutable state בצורה mutable. כתוב state.items.push() בלי bugs.

stateimmutableמינימליפשוט
npm
+
K
React Hotkeys Hook
react-hotkeys-hook3k
docs ↗

Keyboard shortcuts ב-React hook. useHotkeys('cmd+k', handler) — פשוט.

keyboardshortcutshooksUX
npm
V1StGXR8_Z5jdHi
Nanoid
nanoid24k
docs ↗

UUID generator קטן ומהיר. 130 bytes, URL-safe, crypto-secure.

IDUUIDקטןמהיר
npm
Fuse.js
fuse.js17k
docs ↗

Fuzzy search מקומי. חפש ב-array ללא server. מהיר ועם ranking.

searchfuzzyמקומיfilter
npm
Vanilla Tilt
vanilla-tilt4k
docs ↗

Tilt effect על hover. Parallax עם 3D perspective — שורה אחת.

tilt3Dhoverparallax
npm
React Parallax Tilt
react-parallax-tilt1k
docs ↗

Tilt effect ל-React. Gyroscope mobile support, glare, scale.

tiltReactgyroscopemobile
npm
Vanta.js
vanta8k
docs ↗

רקעים אנימטיביים 3D מדהימים. Waves, Birds, Fog, Globe — WebGL.

רקע3DWebGLanimated
npm
Atropos
atropos4k
docs ↗

Parallax hover effects מדהימים. כרטיסים שנראים תלת-ממדיים.

parallax3Dhovercards
npm
Granim.js
granim5k
docs ↗

Gradient animations בcanvas. Fluid, colorful, customizable gradients.

gradientcanvasanimatedcolor
npm
Zdog
zdog11k
docs ↗

Pseudo-3D עם SVG/Canvas. אנימציות עגולות וחמודות כמו ציור.

3DSVGcuteillustration
npm
Matter.js
matter-js16k
docs ↗

Physics engine לbrowser. Gravity, collisions, constraints — אלמנטים שנופלים.

physicsgravitycollisionfun
npm
glslCanvas
glslCanvas2k
docs ↗

הרץ GLSL shaders בcanvas בקלות. Fragment shaders מרהיבים.

shaderGLSLWebGLvisual
npm
Proton
proton-engine2k
docs ↗

Particle engine חזק לweb. Fire, smoke, explosion — simulation מלאה.

particlesfiresimulationcanvas
npm
mo.js
@mojs/core18k
docs ↗

Motion graphics לweb. Burst, Shape, Stagger — אנימציות UI מרהיבות.

motionburstshapesmicro-animations
npm