| layout | default |
|---|---|
| title | Home |
| description | Community-curated light shows, lock sounds, boombox tracks, wraps and horn sounds for your Tesla — browse, download, and load straight onto a USB stick. |
{% assign total = site.lightshows.size | plus: site.locksounds.size | plus: site.boombox.size | plus: site.wraps.size | plus: site.hornsounds.size %}
<style> /* ---- landing-only styling ---- */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); } .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero-bg::before { /* blueprint grid */ content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 54px 54px; -webkit-mask-image: radial-gradient(115% 90% at 50% 0%, #000 25%, transparent 78%); mask-image: radial-gradient(115% 90% at 50% 0%, #000 25%, transparent 78%); opacity: .6; } .hero-bg::after { /* accent wash */ content: ""; position: absolute; top: -30%; left: 50%; transform: translateX(-50%); width: 900px; height: 600px; background: radial-gradient(closest-side, var(--accent-soft), transparent 70%); filter: blur(8px); } .hero-inner { position: relative; z-index: 1; max-width: var(--maxw); margin-inline: auto; padding: var(--s-9) var(--s-5) var(--s-7); text-align: center; } .hero-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: .96; letter-spacing: -.01em; font-size: clamp(2.6rem, 8vw, 5.2rem); margin: var(--s-4) auto var(--s-4); } .hero-title .spark { color: var(--accent-text); text-shadow: 0 0 32px var(--accent-glow); } .hero-sub { color: var(--text-dim); font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 52ch; margin: 0 auto var(--s-6); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-bottom: var(--s-8); } .hero-rail { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-5); } .hero-rail .eq { height: 110px; gap: 5px; border: 1px solid var(--line); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); padding: var(--s-5) var(--s-6) 0; } .hero-rail .eq span { max-width: 14px; } .ticker { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-5) var(--s-8); } .ticker-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-top: none; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); overflow: hidden; } .ticker-cell { padding: var(--s-5); border-right: 1px solid var(--line); background: var(--surface); } .ticker-cell:last-child { border-right: none; } .ticker-cell b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; line-height: 1; } .ticker-cell.accent b { color: var(--accent-text); } .ticker-cell span { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); } .showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-4); } .show-cell { position: relative; display: block; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .18s, border-color .18s, box-shadow .25s; overflow: hidden; } .show-cell::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--eq-grad, var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .25s; } .show-cell:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--shadow); } .show-cell:hover::after { transform: scaleX(1); } .show-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--accent); margin-bottom: var(--s-4); } .show-ico { color: var(--accent-text); } .show-ico svg { width: 22px; height: 22px; } .show-cell h3 { color: var(--text); margin-bottom: var(--s-2); } .show-cell p { color: var(--text-dim); font-size: .88rem; margin-bottom: var(--s-3); } .show-meta { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); display: flex; justify-content: space-between; align-items: center; } .show-meta .count { color: var(--accent-text); } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); counter-reset: step; } .step { position: relative; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .step::before { counter-increment: step; content: "0" counter(step); font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; color: var(--accent-text); opacity: .9; line-height: 1; display: block; margin-bottom: var(--s-3); } .step h3 { color: var(--text); font-size: 1.05rem; margin-bottom: var(--s-2); } .step p { color: var(--text-dim); font-size: .88rem; } .appband { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-7); align-items: center; padding: var(--s-7); background: linear-gradient(120deg, var(--surface), var(--surface-2)); border: 1px solid var(--line); border-radius: var(--radius); position: relative; overflow: hidden; } .appband::before { content: ""; position: absolute; right: -10%; top: -40%; width: 460px; height: 460px; background: radial-gradient(closest-side, var(--accent-soft), transparent 70%); pointer-events: none; } .appband .eq { height: 120px; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-5) var(--s-5) 0; } .appband h2 { margin-bottom: var(--s-3); } .appband p { color: var(--text-dim); margin-bottom: var(--s-5); max-width: 44ch; } .status-pill { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--line); border-radius: 999px; padding: .42rem .85rem; background: var(--surface); } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: statuspulse 2s ease-out infinite; } @keyframes statuspulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .status-dot { animation: none; } } @media (max-width: 720px) { .ticker-grid { grid-template-columns: repeat(2, 1fr); } .ticker-cell:nth-child(2) { border-right: none; } .ticker-cell:nth-child(1), .ticker-cell:nth-child(2) { border-bottom: 1px solid var(--line); } .steps { grid-template-columns: 1fr 1fr; } .appband { grid-template-columns: 1fr; } .appband .eq { order: -1; } } @media (max-width: 560px) { .hero-inner { padding: var(--s-8) var(--s-4) var(--s-6); } .hero-title { font-size: clamp(1.6rem, 7vw, 2.5rem); } .hero-rail, .ticker { padding-inline: var(--s-4); } .hero-rail .eq { padding-inline: var(--s-4); } .ticker-cell b { font-size: 1.7rem; } .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { justify-content: center; } } @media (max-width: 480px) { .steps { grid-template-columns: 1fr; } } </style>A community catalog of light shows, lock sounds, boombox tracks, wraps and horn sounds — free to download and load straight onto your car’s USB.
Every item is a free, community-sourced asset packaged for direct USB transfer to your vehicle.
Synchronized .fseq sequences with matching audio.
Lock & unlock chimes to greet you at the door.
External speaker tracks for Tesla’s Boombox.
Vehicle wrap designs & skins for every model.
Swap the honk for a custom horn melody.
Filter across every category by theme & style.
{% assign feat_ls = site.lightshows | first %} {% assign feat_wrap = site.wraps | first %} {% assign feat_bb = site.boombox | first %}
The VOLTS app for iOS & Android will browse this same catalog and export straight to a USB drive in Tesla’s layout — no desktop required.
In development