Skip to content

feat: implement continuous perimeter border trail glow layout component#890

Open
pari-dubey1 wants to merge 1 commit into
SAPTARSHI-coder:mainfrom
pari-dubey1:feature/border-trail-glow
Open

feat: implement continuous perimeter border trail glow layout component#890
pari-dubey1 wants to merge 1 commit into
SAPTARSHI-coder:mainfrom
pari-dubey1:feature/border-trail-glow

Conversation

@pari-dubey1
Copy link
Copy Markdown

Pull Request Description

This pull request implements the continuous perimeter outline tracking utility under submissions/examples/border-trail-glow/. This feature introduces an ultra-modern interactive element highlighting technique that projects a laser-sharp glowing light ray cycling endlessly along component boundaries upon hover.

Closes #684

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/your-feature-name/
  • Includes demo.html — self-contained, opens in browser with no server environment
  • Includes style.css — raw CSS for the proposed feature
  • Includes README.md — what it does, how to use it, why it fits EaseMotion CSS
  • No changes to core/
  • No changes to components/
  • One feature per PR (no bundled unrelated changes)

Feature Description

What does this add?
It adds an advanced hardware-accelerated border tracing wrapper (.ease-hover-border-trail) that projects a rotating conic background mask smoothly hidden behind an interior containment layer.

How does a developer use it?
Developers attach the utility wrapper class directly over their content cards, passing custom color choices or acceleration metrics seamlessly via simple inline token variables:

<div class="ease-hover-border-trail" style="--ease-trail-color: #3b82f6; --ease-trail-speed: 2s;">
  <div class="ease-card-inner">
    <h3>Module Analytics</h3>
    <p>Dynamic structural cards sit safely inside.</p>
  </div>
</div>

Why does it fit EaseMotion CSS?

It strictly honors the core framework protection philosophy—the outer block configuration parameters remain entirely stable inside document flow. This allows complex linear tracing effects to be threw into deeply nested grids or flexible responsive lists without ever triggering layout breakage or browser recalculation drops.


Demo

Screen.Recording.2026-06-02.110940.mp4

Browser Testing

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

Notes for Maintainer

  • Zero Layout Shifts: By creating the trail effect using absolute pseudo-elements combined with will-change: transform rendering profiles, the text element layout columns never shift even by a single pixel throughout execution.
  • Dynamic Mask Shielding: Uses an adaptive interior card layer mask rule (border-radius: calc(outer - thickness)) ensuring the outer rounded curves match the inward bounding perimeter tracks perfectly without jagged bleeding.
  • Isolating Environments: Staged explicitly using clean folder directory references to bypass local platform noise, keeping the final upstream merge tree completely isolated.

@SAPTARSHI-coder SAPTARSHI-coder added accepted Contribution approved for integration into EaseMotion CSS animation Animation effects, hover interactions, motion ideas, transitions component New UI components (buttons, cards, modals, tooltips, badges) enhancement New feature or request good first issue Good for newcomers GSSoC-26 Official GSSoC 2026 issue gssoc:approved Approved for GSSoC contributions integrated Successfully merged and included in the framework level:intermediate Requires moderate project understanding type:feature New functionality or enhancement labels Jun 2, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accepted Contribution approved for integration into EaseMotion CSS animation Animation effects, hover interactions, motion ideas, transitions component New UI components (buttons, cards, modals, tooltips, badges) enhancement New feature or request good first issue Good for newcomers gssoc:approved Approved for GSSoC contributions GSSoC-26 Official GSSoC 2026 issue integrated Successfully merged and included in the framework level:intermediate Requires moderate project understanding type:feature New functionality or enhancement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE] Continuous Perimeter Border Trail Glow

2 participants