Simplify Buying With
Engage prospects with hands-on product experiences. Embed on your site, share during sales, or send through email campaigns.
2026-03-08 19:10
Diff
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SaaS Hero – Interactive Demo</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
<style>
:root {
--bg1: #e8f0ff;
--bg2: #bcd6ff;
--ink: #0b1220;
--muted: #6b7280;
--card: #ffffffcc;
--stroke: #e5e7eb99;
--accent: #2563eb;
--accent-ink: #eaf2ff;
--shadow: 0 10px 30px rgba(22, 39, 97, 0.08), 0 2px 8px rgba(22, 39, 97, 0.05);
--radius: 22px;
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
font-family:
Inter,
system-ui,
-apple-system,
Segoe UI,
Roboto,
Helvetica,
Arial;
color: var(--ink);
background: radial-gradient(1200px 700px at 50% -10%, var(--bg2), transparent 60%), radial-gradient(1200px 700px at 50% 110%, var(--bg2), transparent 60%),
linear-gradient(180deg, #f7faff 0%, #edf3ff 60%, #eaf1ff 100%);
overflow-x: hidden;
padding: 48px 24px 72px;
}
.hero-frame {
position: relative;
border-radius: 28px;
padding: 48px 28px 74px;
background: linear-gradient(180deg, #fbfdffcc, #ffffffcc);
box-shadow: var(--shadow);
border: 1px solid #f2f4f8;
overflow: hidden;
max-width: 1120px;
margin: 0 auto;
}
.hero-frame::before {
content: '';
position: absolute;
inset: 0;
border-radius: 28px;
padding: 1px;
background: linear-gradient(180deg, #ffffff, #e9eefc);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.grid-lines {
position: absolute;
inset: 0;
background:
linear-gradient(transparent 30%, #e9eef7 31%, transparent 32%) 0 0/100% 120px,
linear-gradient(90deg, transparent 30%, #e9eef7 31%, transparent 32%) 0 0/120px 100%;
opacity: 0.65;
mix-blend-mode: multiply;
pointer-events: none;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
h1 {
font-size: 54px;
line-height: 1.05;
margin: 16px 0 8px;
letter-spacing: -0.02em;
}
h1 .em {
display: inline-block;
padding: 0.06em 0.24em;
border-radius: 12px;
border: 2px dashed #cfd8eb;
background: #f5f8ff;
position: relative;
}
h1 .cursor {
position: absolute;
right: -8px;
top: 50%;
width: 2px;
height: 1.1em;
background: #111;
transform: translateY(-52%);
animation: blink 1.1s steps(2) infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
.sub {
max-width: 720px;
color: var(--muted);
font-size: 15px;
line-height: 1.55;
margin-bottom: 22px;
}
.cta {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
margin-bottom: 22px;
}
.primary {
background: linear-gradient(180deg, #3578ff, #1e55e6);
border: none;
color: #fff;
padding: 12px 18px;
border-radius: 12px;
font-weight: 700;
letter-spacing: 0.01em;
box-shadow:
0 6px 14px rgba(30, 86, 230, 0.2),
inset 0 1px 0 #ffffff80;
cursor: pointer;
}
.primary:hover {
transform: translateY(-1px);
}
.badge {
position: absolute;
font-size: 11px;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid var(--stroke);
background: #fff;
box-shadow: var(--shadow);
}
.badge[data-i='1'] {
left: 38px;
top: 56%;
}
.badge[data-i='2'] {
right: 48px;
top: 44%;
}
.badge[data-i='3'] {
left: 78px;
bottom: 92px;
}
.badge[data-i='4'] {
right: 90px;
bottom: 110px;
}
.testi-wrap {
display: flex;
justify-content: center;
margin-top: 22px;
}
.testi {
width: 520px;
height: 160px;
background: #fff;
border: 1px solid var(--stroke);
border-radius: 16px;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.testi .title {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 10px;
background: #fff;
border: 1px solid var(--stroke);
padding: 8px 12px;
border-radius: 999px;
font-size: 12.5px;
box-shadow: var(--shadow);
}
.orbit {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
.orbit .ring {
width: 360px;
height: 160px;
border-radius: 50%;
border: 1.4px dashed #dfe7f7;
}
.avatar {
position: absolute;
width: 34px;
height: 34px;
border-radius: 999px;
border: 3px solid #fff;
box-shadow: var(--shadow);
background-size: cover;
background-position: center;
}
.avatar:nth-child(1) {
top: 62px;
left: 86px;
background-image: url('https://i.pravatar.cc/68?img=5');
}
.avatar:nth-child(2) {
top: 18px;
left: 238px;
background-image: url('https://i.pravatar.cc/68?img=12');
}
.avatar:nth-child(3) {
top: 64px;
right: 84px;
background-image: url('https://i.pravatar.cc/68?img=31');
}
.avatar:nth-child(4) {
bottom: 14px;
left: 214px;
background-image: url('https://i.pravatar.cc/68?img=22');
}
.fade-up {
opacity: 0;
transform: translateY(14px);
}
.fade-up.appear {
opacity: 1;
transform: none;
transition:
opacity 0.7s ease,
transform 0.7s ease;
}
@keyframes floaty {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
100% {
transform: translateY(0);
}
}
.badge {
animation: floaty 5s ease-in-out infinite;
}
.badge[data-i='2'] {
animation-delay: 0.8s;
}
.badge[data-i='3'] {
animation-delay: 1.6s;
}
.badge[data-i='4'] {
animation-delay: 2.4s;
}
.em {
transition:
box-shadow 0.25s ease,
transform 0.25s ease;
}
.em:hover {
box-shadow: 0 4px 18px rgba(59, 130, 246, 0.18);
}
.cursor-dot {
position: fixed;
inset: 0;
pointer-events: none;
}
.cursor-dot::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: radial-gradient(circle, rgba(59, 130, 246, 0.35), rgba(59, 130, 246, 0) 70%);
transform: translate(-9999px, -9999px);
}
@media (max-width: 900px) {
h1 {
font-size: 42px;
}
.testi {
width: 92%;
}
.badge[data-i='1'],
.badge[data-i='3'] {
left: 22px;
}
.badge[data-i='2'],
.badge[data-i='4'] {
right: 22px;
}
}
@media (max-width: 640px) {
h1 {
font-size: 36px;
}
.hero-frame {
padding: 32px 18px 56px;
}
}
</style>
</head>
<body>
<div class="cursor-dot" aria-hidden="true"></div>
<!-- HERO CARD -->
<section class="hero-frame">
<div class="grid-lines"></div>
<div class="hero fade-up">
<h1>
Simplify Buying With
<span class="em" id="typeTarget">
<span class="type"></span>
<span class="cursor"></span>
</span>
</h1>
<p class="sub">Engage prospects with hands-on product experiences. Embed on your site, share during sales, or send through email campaigns.</p>
<div class="cta"><button class="primary">Get Started</button></div>
</div>
<div class="badge" data-i="1">Unlimited Demos</div>
<div class="badge" data-i="2">Free Templates</div>
<div class="badge" data-i="3">Real-Time Alerts</div>
<div class="badge" data-i="4">24/7 Support</div>
<div class="testi-wrap fade-up">
<div class="testi">
<div class="title">Hear what our customers are saying about us</div>
<div class="orbit">
<div class="ring"></div>
<div class="avatar" title="Wulan S"></div>
<div class="avatar" title="Chris M"></div>
<div class="avatar" title="Mark B"></div>
<div class="avatar" title="Feyza"></div>
</div>
</div>
</div>
</section>
<script>
const observer = new IntersectionObserver(
entries => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('appear');
}
});
},
{ threshold: 0.3 }
);
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
const words = ['Interactive Demos', 'Interactive UI', 'Interactive Experiences'];
const typeEl = document.querySelector('.type');
let wi = 0,
ci = 0,
dir = 1,
hold = 0;
function typeLoop() {
const w = words[wi];
if (dir === 1) {
typeEl.textContent = w.slice(0, ci + 1);
ci++;
if (ci === w.length) {
dir = -1;
hold = 16;
}
} else {
if (hold > 0) {
hold--;
} else {
typeEl.textContent = w.slice(0, ci - 1);
ci--;
if (ci === 0) {
dir = 1;
wi = (wi + 1) % words.length;
}
}
}
requestAnimationFrame(() => setTimeout(typeLoop, dir === 1 ? 60 : 38));
}
typeLoop();
const badges = document.querySelectorAll('.badge');
const frame = document.querySelector('.hero-frame');
frame.addEventListener('mousemove', e => {
const r = frame.getBoundingClientRect();
const x = (e.clientX - r.left) / r.width - 0.5;
const y = (e.clientY - r.top) / r.height - 0.5;
badges.forEach((b, i) => {
const strength = 8 + i * 1.5;
b.style.transform = `translate(${x * strength}px, ${y * strength}px)`;
});
});
frame.addEventListener('mouseleave', () => {
badges.forEach(b => {
b.style.transform = '';
});
});
const glow = document.createElement('div');
glow.style.position = 'fixed';
glow.style.width = '14px';
glow.style.height = '14px';
glow.style.borderRadius = '999px';
glow.style.background = 'radial-gradient(circle, rgba(59,130,246,.35), rgba(59,130,246,0) 70%)';
glow.style.pointerEvents = 'none';
glow.style.zIndex = '50';
document.body.appendChild(glow);
window.addEventListener('mousemove', e => {
glow.style.transform = `translate(${e.clientX - 7}px, ${e.clientY - 7}px)`;
});
</script>
</body>
</html>