fix: conflicting steps() animation and overflow between ease-typewriter and ease-loader-ellipsis

[Pcmhacker-piro]

Description

The Typewriter utility (#30438) and the Loader Ellipsis (in #30448) both use steps() timing functions and overflow: hidden to create their reveal/animation effects. When both appear on the same page, the shared use of ::after pseudo-elements with identical overflow behavior can cause the typewriter caret to inherit the loader's animation properties via CSS cascade.

Affected Components

• Typewriter (Add CSS Text Reveal / Typewriter animation utility #30438)
• Loader / Spinner Gallery — ellipsis variant (Add comprehensive CSS Loader / Spinner Gallery component #30448)

Suggested Resolution

• Prefix all keyframe names with component-specific namespaces
• Use contained animation contexts

[github-actions]

Hey @Pcmhacker-piro! 👋

Thanks for opening this issue — you've been auto-assigned to it.

Before you start coding, please read the quick checklist:

• Make sure no existing issue already covers this idea
• Read the Contribution Guide before opening a PR
• Add files only inside the submissions/ directory (e.g., submissions/examples/your-feature-name/ or submissions/docs/your-feature-name/)
• Include demo.html · style.css · README.md in your folder
• Max 25 active issues per contributor — unassign others before taking new ones
• Join our official Discord Server (Optional - for general developer chat and support; official issues belong on GitHub!)

🕑 Inactivity rule: Issues with no progress for 24 hours (1 day) will be unassigned and reopened for others.

The maintainer will review your PR once submitted. Good luck! ⚡