Feat/intent based layouts

[codedbydollys10]

Pull Request Description

Adds a new Intent-Based Layout Utilities submission that introduces human-readable layout patterns focused on design goals rather than implementation details.

Instead of requiring developers to think about Flexbox or Grid mechanics, these utilities allow layouts to be described using meaningful names that express intent.

Closes #1503

Examples include:

• Split Layout
• Cluster Layout
• Center Content
• Sidebar Layout
• Feature Layout
• Content Focus

The goal is to make layouts more approachable, readable, and aligned with EaseMotion CSS's philosophy.

---

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/intent-based-layouts/
• 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 intent-driven layout utilities that abstract common layout patterns into human-readable classes.

How does a developer use it?

<header class="split">
  <div>Logo</div>
  <nav>Menu</nav>
</header>

<div class="cluster">
  <button>Save</button>
  <button>Edit</button>
  <button>Delete</button>
</div>

<article class="content-focus">
  ...
</article>

Why does it fit EaseMotion CSS?

EaseMotion CSS promotes writing UI in plain English.

This feature extends that philosophy beyond animations into layout design by allowing developers to express intent directly.

Benefits:

• More readable HTML
• Reduced CSS knowledge requirements
• Faster development
• Easier onboarding
• Strong framework differentiation

---

Demo

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

The demo includes:

• Header Navigation
• Action Button Clusters
• Hero Sections
• Blog Content
• Dashboard Layouts
• Feature Sections

---

Browser Testing

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

---

Notes for Maintainer

This submission explores a higher-level layout abstraction layer that aligns closely with EaseMotion CSS's human-readable philosophy.

Utility names and implementations are proposed examples 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/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]

hey @SAPTARSHI-coder review nd merge

[codedbydollys10]

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