pretext

Create dynamic text animations with HTML, CSS, JavaScript, and GSAP.

1|Updated Jun 9, 2026

Search Tags:#interactive #web design #ASCII art #text layout #kinetic typography

Ready to run

npx skills add https://github.com/aivos-xie/hermes-skills --skill pretext-aivos-xie

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/aivos-xie/hermes-skills/tree/main/creative/pretext
Command: npx skills add https://github.com/aivos-xie/hermes-skills --skill pretext-aivos-xie

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @chenglou/pretext, gsap, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill allows users to create visually engaging text-based experiences, such as ASCII art, kinetic typography, and text layout around shapes, enhancing creative and interactive web demos.

Core Features & Use Cases

Text Layout: Create layouts that follow shapes, allowing text to flow around objects or wrap in non-rectangular areas.
Kinetic Typography: Design text that moves or changes over time, providing dynamic visual effects.
ASCII Art: Render text as ASCII art, with options for different fonts and styles.
Use Case: Create an interactive website that displays a message that moves around a circular path, changing colors and sizes as it goes.

Quick Start

Use the pretext skill to create a text-based animation that follows a circular path around a center point.

Frequently Asked Questions about pretext

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create kinetic typography animations that follow a geometric path?▼

Kinetic typography animations following geometric paths are created by combining the @chenglou/pretext library for text layout with GSAP for motion control. This approach allows text to dynamically move and change along shapes like circles.

Can I make text flow around non-rectangular shapes in web design?▼

Text can flow around non-rectangular shapes in web design using geometric text layout features. The @chenglou/pretext library enables text wrapping and flowing around objects, creating visually engaging interactive experiences.

Do I need GSAP to render ASCII art on my website?▼

GSAP is not required to render static ASCII art, but it is necessary when adding dynamic visual effects. The @chenglou/pretext library handles the ASCII art rendering, while GSAP provides the animation for kinetic typography.

What is the best way to build interactive text-based visual experiences?▼

The best way to build interactive text-based visual experiences is using HTML, CSS, and JavaScript with specialized libraries. Combining @chenglou/pretext for geometric text layout and GSAP for animation creates dynamic prototypes and educational projects.

Does this approach work for educational web demos and creative prototypes?▼

This approach works well for educational web demos and creative prototypes. It specifically targets interactive web design projects, allowing developers to build dynamic, geometrically-driven text experiences without complex rendering engines.

Why use @chenglou/pretext instead of standard CSS for text layout?▼

@chenglou/pretext is used instead of standard CSS because it enables geometrically-driven text layouts. Standard CSS handles rectangular text blocks, but this library allows text to follow shapes and wrap in non-rectangular areas.