diff --git a/submissions/examples/text-spotlight-55614/README.md b/submissions/examples/text-spotlight-55614/README.md new file mode 100644 index 00000000000..5ae4d1c44fb --- /dev/null +++ b/submissions/examples/text-spotlight-55614/README.md @@ -0,0 +1,16 @@ +# Text Spotlight Shining Mask Effect + +## What does this do? +A typographic effect where a bright spotlight appears to shine and pan across a dark heading. This is achieved entirely in CSS using `background-clip: text`, `color: transparent`, and an animated `linear-gradient` background position. + +## How is it used? +```html +

Pro Edition

+``` + +## Why does it fit EaseMotion CSS? +It provides an incredibly polished, premium text animation that relies entirely on CSS, creating a looping keyframe animation that is both performant and beautiful. It requires zero extra DOM elements (just the text tag itself) and completely avoids heavy WebGL or JS canvas implementations. + +## Tech Stack +- HTML +- CSS (No JavaScript) diff --git a/submissions/examples/text-spotlight-55614/demo.html b/submissions/examples/text-spotlight-55614/demo.html new file mode 100644 index 00000000000..fae0e09265a --- /dev/null +++ b/submissions/examples/text-spotlight-55614/demo.html @@ -0,0 +1,23 @@ + + + + + + Text Spotlight Shining Mask Demo + + + + +

Pro Edition

+ + diff --git a/submissions/examples/text-spotlight-55614/style.css b/submissions/examples/text-spotlight-55614/style.css new file mode 100644 index 00000000000..b6e9fdba22f --- /dev/null +++ b/submissions/examples/text-spotlight-55614/style.css @@ -0,0 +1,32 @@ +.ease-text-spotlight { + font-size: 4rem; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 2px; + + /* The background defines the text color and the spotlight */ + background: linear-gradient( + 45deg, + #222 20%, + #fff 40%, + #fff 60%, + #222 80% + ); + + /* Make the background 200% width so we can animate it moving */ + background-size: 200% auto; + + /* Clip the background strictly to the text */ + color: transparent; + -webkit-background-clip: text; + background-clip: text; + + /* Animate the background position */ + animation: ease-spotlight-shine 3s linear infinite; +} + +@keyframes ease-spotlight-shine { + to { + background-position: 200% center; + } +}