Calesthio

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

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

Turn a music track into a HyperFrames video with text, images, and clips timed to its rhythm and energy. Additional visual assets are optional, and the workflow includes storyboard approval, visual checks, and final MP4 rendering.

中文简介正在准备中。当前显示英语简介。

• Create a promotional video timed to a music track
• Build a slideshow from music and supplied photos
• Make a music video using animated text alone

Plan the visual and narrative direction of HyperFrames videos, including colors, fonts, composition, narration, and scene rhythm. The skill helps apply existing design specifications, choose a style, and check whether the finished work follows that direction.

中文简介正在准备中。当前显示英语简介。

• Match a video's appearance to existing design specifications
• Choose colors and fonts to suit a mood
• Plan scene rhythm and narration pacing

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

Generate and edit images and videos through Atlas Cloud using one API key across multiple model families. Choose supported models for each task, download the results, and retain details about the model, inputs, and estimated cost.

中文简介正在准备中。当前显示英语简介。

• Generate images and videos through one service
• Edit product images using reference materials
• Create videos from images, video, or audio references

Create and edit images or generate short videos with xAI Grok. The skill explains how to write prompts, combine source images, assign reference images to video roles, and check generation progress before downloading results.

中文简介正在准备中。当前显示英语简介。

• Change an image's style or selected details
• Combine multiple source images
• Create a short product video from reference images

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

Helps agents prepare image, video, speech, music, and avatar generation requests with an exact model and API host. It explains service-specific inputs, request validation, and job resumption so unavailable models are not silently replaced.

中文简介正在准备中。当前显示英语简介。

• Specify an exact model and API host for media generation
• Prepare image edits with reference images and masks
• Resume a timed-out generation job without submitting it again

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

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

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

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

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

Create background music or songs with Google Lyria 3 by choosing a model and structuring musical instructions. The skill guides listening checks, measurement of actual duration, and preparation of a separate master for videos requiring an exact length.

中文简介正在准备中。当前显示英语简介。

• Creating background music timed to a video
• Generating a song with custom lyrics
• Checking generated audio duration and quality

Build web animations with GSAP ScrollTrigger that respond to scrolling. Move or reveal elements, keep sections pinned in place, link animation progress to scroll position, and create parallax effects or horizontal movement driven by vertical scrolling.

中文简介正在准备中。当前显示英语简介。

• Reveal cards as they enter the viewport
• Keep a section pinned during scrolling
• Link animation progress to scroll position

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

Process video and audio with FFmpeg for editing and publishing. Convert formats, resize and compress files, extract audio, trim clips, and change playback speed. Includes recipes for preparing Remotion assets and exporting videos for social platforms and websites.

中文简介正在准备中。当前显示英语简介。

• Convert GIF files to MP4
• Resize and compress videos for publishing
• Extract audio and convert audio formats

Set up lighting and shadows in Three.js scenes. Choose light types, create outdoor or studio lighting, use environment images to illuminate materials, and tune shadow settings to balance appearance with rendering performance.

中文简介正在准备中。当前显示英语简介。

• Create sunlight and sky lighting outdoors
• Set up studio or three-point lighting
• Use HDR images for environment lighting

Turn a written brief into an explainer video by generating narration, images, music, and optional talking presenters. Assemble scenes with Remotion, adjust their timing to the generated audio, review still frames, and render an MP4.

中文简介正在准备中。当前显示英语简介。

• Creating a narrated product introduction
• Turning a sprint review into a video
• Adding an animated presenter to a scene

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

Add mouse, touch, and keyboard interaction to Three.js scenes. Implement object picking, camera navigation, dragging, and transform handles, with examples for selection feedback, coordinate conversion, and limiting the cost of interaction checks.

中文简介正在准备中。当前显示英语简介。

• Select 3D objects with clicks or touch
• Add camera rotation and zoom controls
• Drag, rotate, and scale objects

Create Three.js shapes, custom meshes, 3D text, and point clouds. Explains vertex editing and geometry utilities, plus instancing, a technique for efficiently drawing many copies of the same shape with different positions, sizes, or colors.

中文简介正在准备中。当前显示英语简介。

• Creating basic solids and path-based 3D shapes
• Building and modifying custom meshes
• Displaying 3D text, point clouds, and wireframes

Refactor React components with too many true-or-false options into reusable parts. Provides guidance on component composition, shared state, and flexible interfaces, with examples of good and problematic implementations and specific guidance for React 19.

中文简介正在准备中。当前显示英语简介。

• Refactoring components with too many boolean options
• Designing reusable component libraries
• Reviewing shared state and component architecture