Feat/storytelling motion presets

[codedbydollys10]

Pull Request Description

Adds a new Storytelling Motion Presets submission that introduces animation classes based on user intent and narrative experience rather than individual animation mechanics.

Instead of combining multiple motion utilities, developers can apply a single class that represents the story they want the interface to tell.

Closes #1504

Included presets:

• Introduce
• Highlight
• Reveal
• Showcase
• Celebrate
• Focus

These presets package common animation combinations into meaningful, human-readable experiences.

---

Type of Change

• ✨ New animation / hover effect
• 🧩 New component
• 📝 Documentation improvement
• 🐛 Bug fix in an existing submission
• Other (describe below)

---

Submission Checklist

• All changes are inside submissions/examples/storytelling-motion-presets/
• Includes demo.html
• Includes style.css
• Includes README.md
• No changes to core/
• No changes to components/
• One feature per PR

---

Feature Description

What does this add?

A collection of storytelling-based motion presets that allow developers to choose animation behavior based on intent rather than implementation.

How does a developer use it?

<section class="introduce">
  Welcome to EaseMotion CSS
</section>

<div class="showcase">
  Product Preview
</div>

<div class="celebrate">
  Successfully Saved
</div>

Why does it fit EaseMotion CSS?

EaseMotion CSS is built around human-readable APIs.

Most frameworks ask developers to think about animation mechanics.

This feature allows developers to think about storytelling and user experience instead.

Benefits:

• Faster animation decisions
• Cleaner HTML
• More meaningful class names
• Strong framework identity
• Better onboarding experience

---

Demo

• Demo added (demo.html works directly in the browser)

Demo includes:

• Hero Introductions
• Product Showcases
• Feature Reveals
• Success States
• Dashboard Notifications
• Marketing Components

---

Browser Testing

• Chrome
• Firefox
• Edge
• Safari (optional but appreciated)

---

Notes for Maintainer

This submission explores narrative-driven animation design and does not modify framework source files.

Preset names and animation combinations are provided as a concept and can be standardized during framework integration if accepted.

Submitted under GSSoC'26.

[github-actions]

✅ Submission Validation Passed!

Great job! All required files are present.

📁 Folder: submissions/examples/animation-timeline-utilities

Files found:

• ✅ demo.html
• ✅ style.css
• ✅ README.md

📁 Folder: submissions/examples/intent-based-layouts

Files found:

• ✅ demo.html
• ✅ style.css
• ✅ README.md

📁 Folder: submissions/examples/motion-presets

Files found:

• ✅ demo.html
• ✅ style.css
• ✅ README.md

📁 Folder: submissions/examples/smart-stack-utilities

Files found:

• ✅ demo.html
• ✅ style.css
• ✅ README.md

📁 Folder: submissions/examples/storytelling-motion-presets

Files found:

• ✅ demo.html
• ✅ style.css
• ✅ README.md

📁 Folder: submissions/examples/text-animation-library

Files found:

• ✅ demo.html
• ✅ style.css
• ✅ README.md

🚀 Next Steps:

• The maintainer will review your PR
• Respond to any feedback if requested
• Once approved, your contribution will be merged!

Thank you for contributing to EaseMotion CSS! 🎉

[codedbydollys10]

pls review nd merge @SAPTARSHI-coder

[codedbydollys10]

if the pr is verified can u merge it? @SAPTARSHI-coder