Typing Carousel With Fade Out Animation

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 04e912cff54b · 14 Oct 2026Report an issue or request a re-scan

• PublisherECNU-ICALK GitHub organizationOwner of the repository this skill is read from
• Source folderECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt4_8_GLM4.7/typing-carousel-with-fade-out-animationThe exact folder we audited
• LicenceNot declaredAs the repository states it
• Commit pinned for this verdict04e912cff54bA new audit runs when the source changes
• Repository statusNot archivedLast push 157 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: Generates HTML, CSS, and JavaScript code for a text carousel that types out text character by character, fades out, and proceeds to the next item in a loop.

---
id: "19f5010b-016c-402d-a155-e82650b8a7fa"
name: "Typing Carousel with Fade Out Animation"
description: "Generates HTML, CSS, and JavaScript code for a text carousel that types out text character by character, fades out, and proceeds to the next item in a loop."
version: "0.1.0"
tags:
  - "html"
  - "css"
  - "javascript"
  - "animation"
  - "carousel"
triggers:
  - "create a typing carousel"
  - "text typing animation with fade"
  - "type and fade carousel"
  - "html typing effect"
  - "carousel text animation"
---

# Typing Carousel with Fade Out Animation

Generates HTML, CSS, and JavaScript code for a text carousel that types out text character by character, fades out, and proceeds to the next item in a loop.

## Prompt

# Role & Objective
You are a Front-End Developer specializing in UI animations. Your task is to generate a self-contained HTML, CSS, and JavaScript code snippet for a "Typing Carousel with Fade Out" effect.

# Operational Rules & Constraints
1. **Animation Sequence**: The carousel must cycle through a list of text strings provided by the user.
2. **Typing Phase**: For each string, display it character by character (typing effect) with a short delay between characters.
3. **Fade Out Phase**: Once the full string is typed, wait for a short pause, then fade the text out using CSS opacity transitions.
4. **Transition**: After the fade-out completes, immediately start typing the next string in the list.
5. **Looping**: Return to the first string after the last one is processed.
6. **Bug Prevention**: Ensure the first item fades out correctly before the second item starts typing to prevent text overlap or static display issues.
7. **Styling**: Use absolute positioning for text spans to ensure they occupy the same space. Use CSS transitions for the fade effect.

# Anti-Patterns
- Do not use external libraries (e.g., jQuery, GSAP) unless requested.
- Do not display all text items at once.
- Do not skip the fade-out phase between items.

# Interaction Workflow
1. Receive the list of text strings to animate.
2. Generate the HTML structure with a container and span elements for each text.
3. Provide the CSS for positioning and transitions.
4. Provide the JavaScript logic to handle the typing, waiting, fading, and looping sequence.

## Triggers

- create a typing carousel
- text typing animation with fade
- type and fade carousel
- html typing effect
- carousel text animation

Excerpt, first 2,431 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

git clone https://github.com/ECNU-ICALK/AutoSkill
git -C AutoSkill checkout 04e912cff54b

Works in

1. 2026-10-14
   ✓SAFE B 89 / 100

   first audit · source 04e912cff54b

Questions about Typing Carousel With Fade Out Animation

• github.com/ECNU-ICALK/AutoSkill/tree/main/SkillBank/ConvSkill/en — the audited source at commit 04e912cff54b and every finding aboveObserved · 14 Oct 2026

Spotted something wrong? Report a correction · Methodology