'transitions' 검색 결과

React / Next.js의 버튼, 모달, 알림, 페이지 전환에 애니메이션을 추가하고, 표시와 사라짐 및 스크롤에 연동되는 움직임을 구현합니다.

• 버튼 조작에 움직임을 추가합니다
• 모달과 알림의 표시와 사라짐을 구현합니다
• Next.js App Router 페이지 전환을 구현합니다

Flutter 앱에 애니메이션 효과와 화면 전환, 화면 안의 움직임을 구현하도록 돕습니다. iOS와 Android용 앱에 모션 디자인을 적용할 때 사용합니다.

• Flutter 화면에 애니메이션 추가
• 화면 전환 시 움직임 구현
• iOS와 Android 화면의 움직임 구현

복고풍 픽셀 스타일의 세 장면 영상을 Hyperframes용 HTML로 만듭니다. 제목과 색상을 바꾸고 장면 전환과 움직임을 갖춘 구성으로 완성합니다.

• 픽셀 스타일의 소개 영상을 만들 때
• 세 장면 영상의 내용을 교체할 때
• HTML에서 장면 전환을 확인할 때

Review CSS custom properties, often called CSS variables, used in animations and transitions. Add @property registrations with value types, initial values, and inheritance settings to support smooth changes and validate assigned values.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating gradients that animate smoothly
• Reviewing transitions that use CSS variables
• Defining value types and inheritance for design tokens

Build HyperFrames animations from small motion recipes, scene templates, and transitions. The skill guides runtime selection, including GSAP, Lottie, and Three.js, and provides an audit script to examine timing and choreography while following HyperFrames requirements for reproducible rendering.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Combine motion recipes into a scene
• Build a multi-phase brand reveal from a template
• Design transitions between scenes

Design and implement interface responses such as button feedback, loading indicators, page transitions, and swipe gestures. Use motion to communicate actions and state changes, with guidance on timing, performance, and support for people who prefer reduced animation.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding hover and click feedback to buttons
• Showing loading placeholders and progress indicators
• Creating transitions for pages and interface components

Build product pages that reveal interfaces and explanations as visitors scroll. Uses GSAP ScrollTrigger to coordinate pinned scenes, gradual reveals, and section transitions while keeping the product story and interface readable.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Explain a product workflow through scrolling
• Reveal interface features in stages
• Connect product sections with coordinated transitions

Build sky backgrounds for 3D scenes using procedural atmosphere or panoramic images. Align the horizon, sun, shadows, and environment lighting, while handling camera movement, image loading, and smooth transitions between day, dusk, and night.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating sky backgrounds for architecture and outdoor scenes
• Aligning sunset skies with shadows and reflections
• Designing transitions from day through dusk to night

Add coordinated seasonal transitions to an existing 3D scene. Blend foliage, lighting, sky, ground, snow, and particles from one shared state while preserving camera controls and interactions, so the same place remains recognizable throughout spring, summer, fall, and winter.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Add a four-season selector to an outdoor 3D scene
• Show seasonal changes in an architectural walkthrough
• Coordinate foliage, sunlight, sky, and ground appearance

Enhance existing interfaces with ambitious browser techniques, from scroll-linked animation and natural motion to smooth large-data displays. Compare implementation directions, build the selected approach, and refine it through browser previews, performance checks, and accessible fallbacks.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding scroll-linked effects to landing pages
• Creating fluid transitions between buttons and dialogs
• Keeping large tables and search results responsive

Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

This skill should be used when the user asks to "animate page or route transitions", "add a page transition or crossfade between views", "animate route changes in Next.js App Router", "use the View Transitions API", "AnimatePresence exit doesn't fire on navigation", or "Framer Motion exit animation not working / exit animation before unmount in Next.js". Covers enter/exit page-transition animation with the View Transitions API and Framer Motion, for Next.js App Router and general SPA routing.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

View Transitions API patterns - same-document transitions, cross-document navigation, shared element animations, pseudo-element styling, transition types, reduced-motion handling

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For dev-loop CLI commands (init, lint, inspect, preview, render) see the hyperframes-cli skill; for asset preprocessing commands (tts, transcribe, remove-background) see the hyperframes-media skill.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Design performant animation systems with Framer Motion, GSAP, View Transitions API, and spring physics. Activate on: page transitions, micro-interactions, scroll animations, layout animations, spring physics. NOT for: CSS-only hover effects (use css-in-js-architect), video/canvas rendering (use creative-coding-expert).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Implement, review, or improve SwiftUI animations and transitions. Use when adding explicit animations with withAnimation, configuring implicit animations with .animation(_:body:) or .animation(_:value:), configuring spring animations (.smooth, .snappy, .bouncy), building phase or keyframe animations with PhaseAnimator/KeyframeAnimator, creating hero transitions with matchedGeometryEffect or matchedTransitionSource, adding SF Symbol effects (bounce, pulse, variableColor, breathe, rotate, wiggle), implementing custom Transition or CustomAnimation types, or ensuring animations respect accessibilityReduceMotion.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Design performant animation systems with Framer Motion, GSAP, View Transitions API, and spring physics. Activate on: page transitions, micro-interactions, scroll animations, layout animations, spring physics. NOT for: CSS-only hover effects (use css-in-js-architect), video/canvas rendering (use creative-coding-expert).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Build iOS 26 interfaces with Liquid Glass, a translucent material that blurs backgrounds and responds to interaction. The skill covers buttons, cards, shape-changing transitions, and widgets using SwiftUI, UIKit, and WidgetKit, plus migration from existing blur effects.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding glass-style buttons and cards
• Animating transitions between glass elements
• Adapting widgets to tinted appearance

기존 데이터와 호환성을 유지하며 데이터, API, 설정, 의존성의 이전을 진행합니다. 되돌리기 절차와 신구 동작 검증을 포함해 단계별 변경을 지원합니다.

• 기존 데이터를 보존하며 이전
• 이전 버전과 새 버전이 공존하는 업데이트
• 이전 전 되돌리기 절차 준비

영상 전환이나 사이버펑크풍 메인 비주얼에 쓸 제목 화면을 만듭니다. 색 어긋남, 주사선, 글자 왜곡을 하나의 HTML로 구성합니다.

• 영상 전환용 제목 화면 제작
• 사이버펑크풍 메인 비주얼 제작
• 제목에 가로 방향 글자 왜곡 추가

어두운 배경과 세리프 글꼴로 패션 잡지 같은 세 페이지 동적 연출을 만듭니다. 글자 단계 표시와 장면 전환을 포함한 단일 HTML 파일로 출력합니다.

• 패션 잡지 분위기의 움직이는 소개 제작
• 짧은 이야기를 세 페이지로 표현
• 기존 브랜드 표현을 어두운 지면에 적용

기존 웹 화면에 버튼 조작 피드백과 상태 변화를 전하는 절제된 애니메이션을 추가합니다. 글과 레이아웃을 유지하며 동작 줄이기 설정도 지원합니다.

• 버튼에 조작 피드백을 추가할 때
• 화면의 상태 변화를 전달할 때
• 주요 콘텐츠의 등장 효과를 다듬을 때