Cursor Spotlight CTA
CTADark SaaSWorks in Claude Code · Cursor · v0
Build prompt
Build a closing CTA section on pure black where a soft violet radial spotlight (300px) follows the cursor via CSS custom properties updated on mousemove (throttled with requestAnimationFrame). On touch devices the spotlight drifts on its own. Centered headline, muted subline, outlined button with a subtle glass border.
Code
<style>*{box-sizing:border-box;margin:0}body{font-family:Inter,system-ui,sans-serif;overflow:hidden}</style><style>body{background:#000;color:#fff;height:100vh;display:grid;place-items:center;text-align:center;--x:50%;--y:50%}
.s{position:absolute;inset:0;background:radial-gradient(300px at var(--x) var(--y),#7c5cff55,transparent 70%)}h2{position:relative;font-size:46px;letter-spacing:-.04em}p{position:relative;color:#999;margin:10px 0 20px}
a{position:relative;border:1px solid #fff4;padding:12px 22px;border-radius:12px;color:#fff;text-decoration:none}</style>
<div class="s"></div><div><h2>Your next video is one prompt away.</h2><p>Move your cursor around.</p><a href="#">Browse the gallery →</a></div>
<script>onmousemove=e=>{document.body.style.setProperty('--x',e.clientX+'px');document.body.style.setProperty('--y',e.clientY+'px')}</script>More sections
Free
Free
Free