쇼케이스
모션 그래픽
Aurora, Glitch, Orbital, Compositor — 프로덕션급 모션 레이어
컴포넌트
0+
Canvas 레이어
0
Compositor
0 in 1
GTD MOTION SYSTEM v2
Immersive Motion GraphicsImmersive Motion GraphicsAurora · Glitch · Orbital · Ripple · Scroll Velocity를 레이어로 겹치면 프로덕션급 그래픽 씬을 만들 수 있어요. 사이버펑크 예시는 5단계 시나리오로 Three · Skia · Lottie 반응을 체험할 수 있어요.
Scroll Velocity Skew
Orbital + Ripple
CORE
예시 페이지
풀스크린 몰입형 데모로 GTD Motion 컴포넌트를 시나리오에 연결해 볼 수 있어요.
그래픽 랩
MotionCompositor로 Aurora, MorphBlob, DotGrid, Grain, Spotlight를 한 번에 겹칠 수 있어요. 스크롤 속도에 반응하는 Skew, RGB Glitch, Orbital Ring, Ripple Canvas까지 조합해 보세요.
컴포넌트 목록
스크롤
- MotionScene풍경·구름 레이어와 비네팅·그레인을 포함한 풀 패럴랙스 씬이에요.
- ScrollReveal스크롤 진입 시 fade·slide·scale로 등장해요. 장면 전환·섹션 reveal에 적합해요.
- ParallaxLayer스크롤 속도에 따라 레이어가 다르게 움직여요. 깊이감 있는 그래픽 레이어에 쓰기 좋아요.
- StaggerGroup자식 요소가 순차적으로 나타나요. 위젯 그리드·카드 리스트 reveal에 적합해요.
- AmbientBackdrop메시 그라디언트와 글로우 orb를 겹친 앰비언트 배경이에요.
- CardStackScrollNew스크롤에 따라 카드가 고정 위치에 차곡차곡 쌓여요.
- CardStackRotateNew스크롤 카드 스택에 회전과 축소 단계를 함께 적용해요.
- SvgFollowScrollNew스크롤 진행률에 맞춰 요소가 SVG 경로를 따라 이동해요.
- OliverParallaxNew자식 레이어마다 다른 속도를 적용하는 패럴랙스 컨테이너예요.
- TextScrollAnimationNew스크롤 구간에 맞춰 글자 또는 단어가 순차적으로 강조돼요.
- ScrollImageRevealNew이미지 영역을 방향성 마스크와 스케일로 드러내요.
- ScrollFadeNew스크롤 위치에 따라 콘텐츠를 나타내거나 사라지게 해요.
- ScrollProgressNew페이지 스크롤 진행률을 가로 또는 세로 막대로 표시해요.
- AnimeJsScrollbarNew그라데이션 썸과 섹션 리스트로 구성한 커스텀 스크롤바예요.
- ThingsDragAndScrollNewThings drag and scroll 모션 컴포넌트예요.
- ImageCursorTrailNewImage cursor trail 모션 컴포넌트예요.
- SienaParallaxNewSiena parallax 모션 컴포넌트예요.
- ScrollImagesReveal001NewScroll images reveal 001 모션 컴포넌트예요.
- ScrollImagesReveal002NewScroll images reveal 002 모션 컴포넌트예요.
- VercelScrollWithBlurNewVercel scroll with blur 모션 컴포넌트예요.
- ParallaxImageNewParallax Image 모션 컴포넌트예요.
- SideScrollNavigationNewSide Scroll Navigation 모션 컴포넌트예요.
- TextRevealBoxNewText reveal box 모션 컴포넌트예요.
- ImageRevealNewImage reveal 모션 컴포넌트예요.
- HorizontalTextRevealNewHorizontal Text reveal 모션 컴포넌트예요.
- InfiniteCanvasNewInfinite canvas 모션 컴포넌트예요.
- TimelineCalendarNewTimeline calendar 모션 컴포넌트예요.
- TeamShowcaseScrollNewTeam showcase scroll 모션 컴포넌트예요.
- ProjectsShowcaseNewProjects Showcase 모션 컴포넌트예요.
- Motion3dRollingTextOnScrollNew3D Rolling Text on scroll 모션 컴포넌트예요.
- ScrollRevealGridCardsNewScroll reveal grid cards 모션 컴포넌트예요.
내러티브
인터랙션
- GraphicOrb블러 처리된 글로우 orb로 앰비언트 깊이감을 더해요.
- MotionWidget썸네일·shine·lift 효과가 있는 인터랙티브 위젯 카드예요.
- PressableSurface클릭·터치 시 bounce·glow 피드백을 주는 인터랙션 래퍼예요.
- FloatElement부드럽게 떠다니는 loop 애니메이션이에요. 그래픽 오버레이 장식에 쓰기 좋아요.
- SocialFlipButtonNew아이콘과 글자별 플립 전환을 결합한 소셜 액션 버튼이에요.
- ApplePlayButtonNew재생과 일시 정지 상태를 아이콘으로 전환하는 버튼이에요.
- MusicToggleButtonNew음악 재생과 음소거 상태를 전환하는 모션 버튼이에요.
- ThemeToggleButtonsNew라이트·다크·시스템 테마를 선택하는 버튼 그룹이에요.
- ThemeToggleButtonNew라이트와 다크 테마 아이콘을 전환하는 단일 버튼이에요.
- CssLinkNew밑줄·하이라이트·화살표 모션을 제공하는 링크예요.
- TextRollNavigationNew호버와 포커스에서 텍스트가 구르는 내비게이션이에요.
- MouseFollowNew포인터를 부드럽게 추적하는 커스텀 팔로어 래퍼예요.
- CustomTooltipNew위치·정렬·지연을 조절할 수 있는 커스텀 툴팁이에요.
- SmoothCaretInputNew입력 위치를 부드럽게 따라가는 커스텀 캐럿 입력창이에요.
- AutoScaleInputNew입력 길이에 맞춰 너비가 자동으로 늘어나는 입력창이에요.
- AnimatedButtonNewAnimated CTA button with shine effect
- CandyButtonNewGlassy candy-like button with top highlight
- PopButtonNewInteractive 3D pushable pop button
- GenerateButtonNewAnimated button for generation tasks
- RadialGlowButtonNewButton with animated radial gradient hover
- LiquidMetalNewMetallic fluid shader-inspired button
- CreepyButtonNewButton with tracking eyes motif
- CornerButtonNewAnimated corner dots and lines button
- GlassDockNewMac-style floating dock
- SpotlightNavbarNewNavbar with animated spotlight effect
- NotchNavbarNewResponsive navbar with cutout notch
- GooeySearchNewMorphing gooey blob search button
- AnimatedFooterNewReveal-on-scroll footer with parallax
- LineHoverLinkNewAnimated hover underline styles
- FolderPreviewNewFolder stack visual preview
- AnimatedTooltipNewBouncy SVG-shaped tooltips
- NikeMenuNewNike menu 모션 컴포넌트예요.
- UniswapCountryDialogNewUniSwap Country Dialog 모션 컴포넌트예요.
- FamilyWalletNewFamily wallet 모션 컴포넌트예요.
- AaveTokenSwapNewAave token swap 모션 컴포넌트예요.
- FamilyReceiveButtonNewFamily Receive button 모션 컴포넌트예요.
- NextjsGooeyMenuNewNextjs gooey menu 모션 컴포넌트예요.
- VercelCommandSearchNewVercel Command Search 모션 컴포넌트예요.
- VerticalTooltipMenuNewVertical tooltip menu 모션 컴포넌트예요.
- DraggableSnapButtonNewDraggable snap button 모션 컴포넌트예요.
디스플레이
- CountUp뷰포트 진입 시 숫자가 ease-out으로 올라가요.
- Marquee무한 스크롤 텍스트·로고 띠예요. 크레딧·스택 나열에 쓰기 좋아요.
- AnimatedNumberNew시작값에서 목표값까지 숫자를 부드럽게 보간해요.
- ProgressiveBlurNew지정 방향으로 점진적으로 강해지는 블러 오버레이예요.
- AppleSquircleNew연속 곡률과 하이라이트를 적용한 스쿼클 표면이에요.
- VideoPlayerNew키보드 탐색과 커스텀 재생 컨트롤을 제공하는 비디오 플레이어예요.
- BreakpointIndicatorNew개발 중 현재 반응형 화면 구간을 고정 배지로 표시해요.
- DebugPanelNew개발 정보를 접고 펼칠 수 있는 고정 디버그 패널이에요.
- KnockoutBracketNew브래킷이 텍스트 주변에서 펄스하는 노크아웃 타이포 모션이에요.
- FlipTextNewCharacter flip text animation
- FlipFadeTextNewWord flip and fade cycle
- LiquidTextNewFluid displacement text effect
- MorphTextNewBlur-morph word rotation effect
- AsciiGlitchRippleNewCharacter-scramble wave ripple effect
- AgentBentoGridNewMulti-agent workspace grid layout
- ExpandableBentoGridNewInteractive multi-panel bento
- StaggeredGridNewOffset card grid composition
- ImageScatterNewScroll-triggered scattered photo gallery
- GlowBorderCardNewCard with animated glow border
- TestimonialsCardNewAnimated testimonial stack
- CursorCardNewInline link with cursor tracking preview card
- ElasticStackNewHorizontal expanding staggered stack
- LogoSliderNewInfinite logo marquee
- StackedLogosNewOverlapping brand logos
- MaskedAvatarsNewStacked masked avatar list
- ImageRevealListNewHover-based image reveal tooltip list
- FaqAccordionNewAnimated expanding FAQ list
- SharedTooltipAvatarsNewAvatar stack with shared tooltip
- MagneticSpotlightMarqueeNewFull-screen marquee with spotlight cursor
- KineticTextLoaderNewTypography-based animated loader
- DynamicIslandNewDynamic island 모션 컴포넌트예요.
- NikePreloaderNewNike preloader 모션 컴포넌트예요.
- WordsPreloaderNewWords preloader 모션 컴포넌트예요.
- StairsPreloaderNewStairs preloader 모션 컴포넌트예요.
- DoubleStairsPreloaderNewDouble stairs preloader 모션 컴포넌트예요.
- PixelPreloaderNewPixel preloader 모션 컴포넌트예요.
- VercelLiquidSimulationNewVercel Liquid simulation 모션 컴포넌트예요.
- AsciiSimulationNewAscii Simulation 모션 컴포넌트예요.
- BoxLoadingPreloaderNewBox loading preloader 모션 컴포넌트예요.
- MinimalCardExpandNewMinimal Card Expand 모션 컴포넌트예요.
- RollingTextNewRolling text 모션 컴포넌트예요.
- HoverExpandNewHover expand 모션 컴포넌트예요.
- AppleNavbarV001NewApple Navbar V001 모션 컴포넌트예요.
- VercelTooltipNewVercel Tooltip 모션 컴포넌트예요.
- VercelNavigationBarNewVercel navigation bar 모션 컴포넌트예요.
- DrawingCursorEffectNewDrawing cursor effect 모션 컴포넌트예요.
- AnimatedNumberInputNewAnimated number input 모션 컴포넌트예요.
- NumberFlowNewNumber flow 모션 컴포넌트예요.
- AppleNavbarV002NewApple Navbar V002 모션 컴포넌트예요.
- AppleFeatureBlockNewApple Feature Block 모션 컴포넌트예요.
- AppleCarouselNewApple carousel 모션 컴포넌트예요.
- DiaBrowsersCarousalNewDia Browser's Carousal 모션 컴포넌트예요.
- AiInput001NewAI Input 001 모션 컴포넌트예요.
- AiInput002NewAI Input 002 모션 컴포넌트예요.
- AiInput003NewAI Input 003 모션 컴포넌트예요.
- AiInput004NewAI Input 004 모션 컴포넌트예요.
- AiInput005NewAI Input 005 모션 컴포넌트예요.
- GradientHoverCardsNewGradient hover cards 모션 컴포넌트예요.
- ExpandableTabsNavigationNewExpandable tabs navigation 모션 컴포넌트예요.
- BouncyAccordionNewBouncy accordion 모션 컴포넌트예요.
모션 그래픽
- SpotlightSurface포인터를 따라 부드럽게 이동하는 스포트라이트 글로우예요. 히어로·카드 배경에 깊이감을 더해요.
- TiltCard3D 틸트와 홀로그래픽 glare를 결합한 카드예요. 포인터 위치에 따라 perspective가 반응해요.
- TextScramble뷰포트 진입 시 글리치 디코딩으로 텍스트가 해독돼요. 히어로 타이틀·테크 카피에 적합해요.
- ClipRevealclip-path로 원형·와이프·커튼 마스크 reveal을 적용해요. 이미지·비디오 등장에 쓰기 좋아요.
- MorphBlob블러 orb 3겹이 유기적으로 drift하는 앰비언트 그래픽이에요. 배경 레이어로 쓰기 좋아요.
- MagneticWrap포인터에 끌려오는 자석 효과 래퍼예요. CTA 버튼·아이콘에 미세한 인터랙션을 더해요.
- ParticleBurst클릭·터치 지점에서 파티클이 방사돼요. 버튼·카드에 순간 피드백을 줄 때 쓰기 좋아요.
- DotGridFieldCanvas 기반 인터랙티브 도트 필드예요. 포인터 주변 dot이 scale·밝기로 반응해요.
- AuroraFieldCanvas 오로라 밴드가 유기적으로 흐르고, 포인터에 반응해요. 히어로·풀스크린 배경에 적합해요.
- SplitTextReveal글자·단어 단위 3D flip stagger reveal이에요. 히어로 타이틀에 쓰기 좋아요.
- GlitchImageRGB 채널 분리·스캔라인 글리치 효과예요. 호버·in-view·always 트리거를 지원해요.
- ScrollVelocitySkew스크롤 속도에 따라 skew·shift가 반응해요. 갤러리·카드 스택에 깊이감을 더해요.
- PathStrokeDrawSVG path stroke-dashoffset 드로우 애니메이션이에요. 로고·시그니처 라인 reveal에 적합해요.
- GrainOverlay필름 그레인 노이즈 오버레이예요. Compositor나 씬 위에 질감을 더할 때 쓰기 좋아요.
- OrbitalSystem3D CSS orbital ring과 노드가 회전해요. 코어 UI·로딩·브랜드 그래픽에 적합해요.
- RippleCanvasCanvas 물결 리플이 클릭·드래그·앰비언트로 퍼져요. 인터랙티브 바닥 레이어에 쓰기 좋아요.
- MotionCompositorAurora·Blob·Grid·Grain·Spotlight 레이어를 boolean/props로 한 번에 조합해요.
- ChromaticTextRGB 분리 chromatic aberration 텍스트예요. CTA·히어로 강조에 쓰기 좋아요.
- LottieLayerLottie JSON 애니메이션 레이어예요. src URL 또는 animationData로 재생해요.
- ThreeStageThree.js + React Three Fiber 3D 스테이지예요. cyber-grid·wire-orbit 프리셋을 지원해요.
- SkiaFieldSkia CanvasKit WASM 기반 네온 그리드·스캔라인·HUD 레이어예요.
- PerspectiveCarouselNew활성 카드를 중심으로 원근감 있게 펼쳐지는 캐러셀이에요.
- CardSwipeCarouselNew카드를 좌우로 넘기는 스와이프 중심 캐러셀이에요.
- InvertedPerspectiveCarouselNew반전된 원근 배치로 깊이감을 만드는 캐러셀이에요.
- CreativeCarouselNew비대칭 카드 배치와 전환을 결합한 크리에이티브 캐러셀이에요.
- CreativeCarouselStackNew여러 카드를 겹쳐 전환하는 스택형 캐러셀이에요.
- ExpandOnHoverNew호버·포커스한 가로 패널이 확장되는 캐러셀이에요.
- ExpandOnHoverVerticalNew호버·포커스한 세로 패널이 확장되는 캐러셀이에요.
- ClipPathCarouselNewclip-path 마스크로 장면을 전환하는 캐러셀이에요.
- LoopAnimationNew자식 요소에 float·pulse·rotate·orbit 반복 모션을 적용해요.
- GooeyEffectNew겹친 자식 요소가 액체처럼 이어지는 구이 필터 래퍼예요.
- SvgClipPathMaskNewSVG clip-path 정의로 콘텐츠를 원하는 형태로 마스킹해요.
- AnimatedIconsNew여러 아이콘을 일정 간격으로 부드럽게 교체해요.
- CanvasCrowdNew다수의 점이 유기적으로 움직이는 Canvas 군중 그래픽이에요.
- ImageCollageNewInteractive scattered image collage toggle
- InteractiveBookNew3D page-flip style book
- ImageTrailNewCursor-following image trail effect
- CylinderCarouselNewInfinite CSS 3D cylinder carousel
- DiagonalCarouselNewSpring-driven diagonal carousel
- RippleDisplacementSliderNewInteractive slider with fluid ripple transitions
- ScrollDissolveRevealNewScroll-driven image dissolve reveal
- PixelatedImageTrailNewCursor trail image reveal
- InteractiveKeyboardNewAnimated physical keyboard UI
- TypingKeyboardNew3D isometric keyboard with auto-typing screen
- SolarSystemNewInteractive 3D technology ecosystem orbit
- InteractiveParticlesNewImage-sampled particles around the cursor
- WaveGridNewInteractive 3D grid rippling with cursor
- AuroraHeroNewFluted glass dynamic hero with switch
- FluidMorphBackgroundNewOrganic fluid shape morphing background
- TwistingRibbonNew3D waving neon ribbon animation
- AnimatedRaysNewHero with animated heading rays
- PerspectiveGridNew3D perspective matrix background
- LightLinesNewAnimated flowing line background
- LiquidOceanNewAnimated ocean wave field
- HoverMembersNewHover members 모션 컴포넌트예요.
- TikTikColorListNewTik tik color list 모션 컴포넌트예요.
- Interactive3dHeroNewInteractive3d Hero 모션 컴포넌트예요.
- DevouringDetailsSignInNewDevouring details sign in 모션 컴포넌트예요.
- AppleAiGradientNewApple Ai gradient 모션 컴포넌트예요.
설치
@goldtreedev/ui와 함께 모션 CSS를 import해요.
npm install lottie-react three @react-three/fiber @react-three/drei canvaskit-wasm
@import "@goldtreedev/ui/motion.css";모든 모션 컴포넌트는 prefers-reduced-motion을 존중해요.