{
CF
}
Code
Fronts
Back to CSS Hero Sections
Sticky Scroll Cue
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.hs-sc { position: relative; width: 100%; min-height: clamp(260px, 36vh, 100vh); padding: clamp(20px, 4vh, 80px) clamp(16px, 4vw, 40px); background: linear-gradient(180deg, #0a0a14 0%, #1a1438 100%); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: Georgia, serif; color: #f0eeff; text-align: center; } .hs-sc-bg { position: absolute; inset: 0; background: radial-gradient(45% 30% at 50% 100%, rgba(167,139,250,0.18), transparent 70%), radial-gradient(35% 25% at 80% 20%, rgba(255,108,138,0.10), transparent 70%); pointer-events: none; } .hs-sc-c { position: relative; z-index: 1; max-width: 600px; display: flex; flex-direction: column; gap: 10px; align-items: center; } .hs-sc-eye { font-family: monospace; font-size: clamp(9px, 1.4vw, 11px); letter-spacing: 0.16em; color: #a78bfa; text-transform: uppercase; } .hs-sc h1 { margin: 0; font-size: clamp(22px, 5vw, 60px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-style: italic; } .hs-sc p { margin: 0; font-size: clamp(12px, 1.6vw, 17px); color: #b8b6d4; font-style: normal; font-family: system-ui, sans-serif; } .hs-sc-cue { position: absolute; bottom: clamp(14px, 3vh, 32px); left: 50%; transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: monospace; font-size: 9.5px; letter-spacing: 0.12em; color: #b8b6d4; text-transform: uppercase; } .hs-sc-mouse { width: 18px; height: 28px; border: 1.5px solid #a78bfa; border-radius: 10px; display: flex; justify-content: center; padding-top: 4px; } .hs-sc-mouse span { display: block; width: 2.5px; height: 6px; background: #a78bfa; border-radius: 2px; animation: hs-sc-drop 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes hs-sc-drop { 0% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(8px); opacity: 0; } 100% { transform: translateY(8px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hs-sc-mouse span { animation: none; } }
<section class="hs-sc"> <div class="hs-sc-bg" aria-hidden="true"></div> <div class="hs-sc-c"> <span class="hs-sc-eye">— Manifesto</span> <h1>Make the web feel made.</h1> <p>Hand-coded interfaces for people who care.</p> </div> <div class="hs-sc-cue" aria-hidden="true"> <span class="hs-sc-cue-label">Scroll</span> <div class="hs-sc-mouse"><span></span></div> </div> </section>
Live preview
Ready