Calesthio

Turn a website's screenshots and brand assets into a HyperFrames site tour or social clip. Develop a storyboard and script, add optional narration and captions, then validate the video and deliver a Studio preview.

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

• Creating a video tour of a portfolio
• Turning a blog or landing page into a social clip
• Making a site showcase with narration and captions

Implement web animations with GSAP plugins, including animated layout changes, draggable elements, text effects, and SVG drawing or shape transitions. The skill explains plugin registration, configuration, cleanup, and development tools for inspecting animation timelines.

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

• Animating grid or list layout changes
• Adding draggable cards with momentum
• Revealing headings one character at a time

Write and review animation code using gsap.utils helpers. Convert scroll positions into animation values, constrain ranges, generate random values, snap positions to a grid, and handle element collections with reusable functions.

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

• Mapping scroll position to movement or rotation
• Snapping animated positions to a grid
• Randomizing element positions and colors

Use DashScope to generate images, turn text into narration, and transcribe audio with timing for each word. The skill guides API setup and output handling for preparing video images, voice tracks, and subtitle material.

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

• Generate images for a video
• Turn a script into narration
• Transcribe audio with word timings for subtitles

Build GSAP animations in Vue, Svelte, and related frameworks with clear setup and cleanup patterns. Scope element selection to each component, start animations after elements exist, and remove animations when the component is destroyed.

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

• Adding GSAP animations to Vue or Svelte components
• Keeping animations scoped to one component
• Cleaning up animations when components are removed

Routes video requests to the appropriate HyperFrames workflow based on the source material and intended result. It guides agents toward specialized steps for product promos, explainers, captions, motion graphics, music videos, and HTML-based video compositions.

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

• Choose a workflow for a product launch video
• Turn an article or notes into an explainer video
• Add captions or graphic overlays to a talking-head video

Design reusable pose data for 2D characters, covering emotions, actions, mouth shapes, and repeated movements. Organize changes to individual body parts, pose durations, and transitions so animation sequences have clearly defined stages.

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

• Planning a reusable set of emotional expressions
• Designing walking and other repeated movements
• Organizing mouth shapes for a character

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

Generate short videos with audio from prompts and reference images, then refine them through conversational edits. The skill covers targeted object, lighting, and text changes, plus timed actions, using Gemini Omni Flash through documented video tools.

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

• Creating short videos with sound from written prompts
• Assigning reference images to characters, products, or styles
• Refining objects, lighting, and text through conversation

Generate multilingual narration with fish.audio, reuse a previously created voice model, and adjust emotion, pace, and volume. Start with a short voice sample before producing the full audio file.

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

• Create multilingual video narration
• Reuse a voice created in the playground
• Add laughter or whispers to narration

Guide HyperFrames video projects from setup through layout checks, editable previews, and video output. Covers command-line workflows, environment troubleshooting, and distributed rendering on AWS Lambda, which splits video rendering work across cloud functions.

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

• Setting up a HyperFrames video project
• Checking text overflow and scene display
• Exporting a video after reviewing it in Studio

Generate Mandarin and multilingual narration with Volcengine Doubao Speech 2.0. Choose a voice and speaking speed, save the audio, and retain character-level timing metadata for subtitles in an OpenMontage workflow.

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

• Creating Mandarin narration for explainer videos
• Comparing short samples of voices and speaking speeds
• Building subtitles from character-level timestamps

Generate video clips from text descriptions or reference images through multiple API services. Compare available providers by cost and task needs, choose aspect ratios, track generation progress, and refine existing clips through conversational editing with Gemini Omni.

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

• Generating clips from written scene descriptions
• Animating a product photo
• Creating vertical videos for social media

Structure an HTML video project for HyperFrames, with explicit clip timing, tracks, reusable scene sections, and framework-controlled media playback. Provides rules for repeatable rendering and checks to identify composition problems before producing the final video.

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

• Create the HTML structure for a video project
• Organize clip timing and tracks
• Connect reusable scene sections

Create terminal demos that look like screen recordings using Remotion's TerminalScene component. Script command typing, output, pauses, and badges, then adjust their timing to match narration in tutorials or setup walkthroughs.

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

• Create an installation walkthrough video
• Match command timing to narration
• Build a repeatable terminal demo

Animate characters built from SVG parts using GSAP and CSS transforms. Coordinate gestures and facial expressions, keep joints connected, and control playback by frame in Remotion or validate browser previews with HyperFrames.

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

• Coordinate head and arm movements
• Check blinks, gaze, and mouth shapes
• Control a GSAP timeline by frame in Remotion

Improve GSAP animation performance by reviewing animated properties, browser layout work, and simultaneous updates. Use transforms, grouped updates, reusable animations, and targeted cleanup to reduce stuttering in lists, mouse followers, and scroll effects.

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

• Reviewing stuttering GSAP animations
• Reducing animation load in long lists
• Optimizing mouse-following effects

Write, review, and refactor React and Next.js code using performance guidelines from Vercel. Prioritized rules help identify sequential data requests, oversized JavaScript bundles, unnecessary re-renders, and other opportunities to improve loading and responsiveness.

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

• Reviewing React components for performance issues
• Improving data fetching in Next.js pages
• Reducing JavaScript bundle size

Create instrumental tracks, songs with lyrics, background music, and jingles using the ElevenLabs Music API. Describe the sound and duration, or edit a structured composition plan to control musical styles and sections.

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

• Creating background music for a video
• Generating a song with lyrics
• Making a short jingle

Create mathematical and geometric animations in Python with Manim Community Edition. Use guidance, examples, and scene templates to structure animations, display equations, plot graphs, control cameras, and render two-dimensional or three-dimensional scenes.

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

• Animating equations and derivations
• Creating function graphs and area visualizations
• Building 3D surfaces with camera movement

Turn a math or science video idea into a detailed scene plan. Research the topic, clarify the audience, and outline visuals, narration, transitions, and implementation notes for Manim, an animation tool.

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

• Turn a rough explainer idea into a scene plan
• Plan intuitive math and science visuals
• Adapt video depth to the audience

Implement animation in React with Framer Motion examples based on Disney's 12 animation principles. Add squash and stretch, preparatory movements, smooth acceleration, overlapping motion, and hover or tap responses with defined timing.

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

• Adding hover and tap responses to buttons
• Animating jumps with preparation and curved paths
• Revealing list items one after another

Edit local video files with ffmpeg, a command-line media tool. Trim and join clips, resize for social platforms, adjust playback speed, extract or replace audio, add image overlays, and export compressed or converted files.

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

• Trimming and joining video clips
• Resizing videos for social platforms
• Extracting or replacing audio

Integrate FLUX image generation and editing into applications through the BFL API. The guide covers authentication, checking asynchronous results, completion notifications through webhooks, request limits, error handling, regional endpoints, and downloading generated images before their URLs expire.

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

• Add FLUX image generation and editing to an application
• Implement result checks and completion notifications
• Handle request limits and API errors