Lavender
– BeneVossa
Skip to content
Choosing a selection results in a full page refresh.
Opens in a new window.
/**
* BENEVOSSA — Luxury Store Animations
* Paste this entire script before in your theme.liquid
* Online Store → Themes → Edit Code → theme.liquid
*/
(function () {
'use strict';
/* ─── 1. INJECT STYLES ─────────────────────────────────────── */
const css = `
/* Cursor */
*, *::before, *::after { cursor: none !important; }
#bv-cursor {
position: fixed; width: 10px; height: 10px;
background: #d4af72; border-radius: 50%;
pointer-events: none; z-index: 99999;
transform: translate(-50%, -50%);
transition: transform 0.1s ease, background 0.2s ease, width 0.25s ease, height 0.25s ease;
mix-blend-mode: difference;
}
#bv-cursor-ring {
position: fixed; width: 38px; height: 38px;
border: 1.5px solid rgba(212,175,114,0.55);
border-radius: 50%; pointer-events: none;
z-index: 99998; transform: translate(-50%,-50%);
transition: transform 0.35s cubic-bezier(.16,1,.3,1),
width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}
#bv-cursor.hover { width: 22px; height: 22px; background: #fff; }
#bv-cursor-ring.hover { width: 60px; height: 60px; opacity: 0.4; }
/* Page load veil */
#bv-veil {
position: fixed; inset: 0; background: #0a0a0a;
z-index: 99990; pointer-events: none;
transition: opacity 0.9s cubic-bezier(.4,0,.2,1);
}
#bv-veil.gone { opacity: 0; }
/* Scroll reveal */
.bv-reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.75s cubic-bezier(.16,1,.3,1),
transform 0.75s cubic-bezier(.16,1,.3,1);
}
.bv-reveal.bv-visible {
opacity: 1;
transform: translateY(0);
}
.bv-reveal-delay-1 { transition-delay: 0.1s; }
.bv-reveal-delay-2 { transition-delay: 0.2s; }
.bv-reveal-delay-3 { transition-delay: 0.35s; }
/* Product card shimmer */
.bv-shimmer { position: relative; overflow: hidden; }
.bv-shimmer::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(
105deg,
transparent 40%,
rgba(255,255,255,0.06) 50%,
transparent 60%
);
background-size: 200% 100%;
animation: bv-shimmer-move 3.5s infinite linear;
}
@keyframes bv-shimmer-move {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Gold marquee bar */
#bv-marquee-bar {
width: 100%; overflow: hidden;
background: linear-gradient(90deg, #0a0a0a, #1a1610, #0a0a0a);
padding: 10px 0;
border-top: 1px solid rgba(212,175,114,0.18);
border-bottom: 1px solid rgba(212,175,114,0.18);
}
#bv-marquee-track {
display: flex; white-space: nowrap;
animation: bv-marquee 22s linear infinite;
}
.bv-marquee-item {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 11px; letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(212,175,114,0.75);
padding: 0 2.5rem;
}
.bv-marquee-dot {
color: #d4af72; opacity: 0.5;
padding: 0 0.5rem;
}
@keyframes bv-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Product image parallax zoom */
.bv-product-card { transition: transform 0.5s cubic-bezier(.16,1,.3,1); }
.bv-product-card:hover { transform: translateY(-6px); }
.bv-product-card .bv-product-img-wrap {
overflow: hidden;
position: relative;
}
.bv-product-card .bv-product-img-wrap img {
transition: transform 0.7s cubic-bezier(.16,1,.3,1);
will-change: transform;
}
.bv-product-card:hover .bv-product-img-wrap img {
transform: scale(1.06);
}
/* "Add to Cart" glow press */
[name="add"], [type="submit"], .btn-addtocart,
button[form], form[action*="/cart/add"] button,
.product-form__submit {
transition: box-shadow 0.25s ease, transform 0.18s ease !important;
}
[name="add"]:hover, [type="submit"]:hover,
.product-form__submit:hover {
box-shadow: 0 0 22px rgba(212,175,114,0.35),
0 0 6px rgba(212,175,114,0.2) !important;
transform: translateY(-1px) !important;
}
[name="add"]:active, [type="submit"]:active,
.product-form__submit:active {
transform: scale(0.97) !important;
}
/* Smooth page transitions */
body { animation: bv-fadein 0.5s ease both; }
@keyframes bv-fadein {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Nav link hover */
header a, .site-nav a, .main-nav a, nav a {
position: relative;
transition: color 0.2s ease;
}
header a::after, .site-nav a::after, .main-nav a::after, nav a::after {
content: '';
position: absolute; bottom: -2px; left: 0;
width: 0; height: 1px;
background: #d4af72;
transition: width 0.3s cubic-bezier(.16,1,.3,1);
}
header a:hover::after, .site-nav a:hover::after,
.main-nav a:hover::after, nav a:hover::after {
width: 100%;
}
/* Image preloader fade */
img { transition: opacity 0.4s ease; }
img.bv-loading { opacity: 0; }
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
`;
const styleEl = document.createElement('style');
styleEl.textContent = css;
document.head.appendChild(styleEl);
/* ─── 2. CUSTOM CURSOR ──────────────────────────────────────── */
function initCursor() {
const dot = document.createElement('div'); dot.id = 'bv-cursor';
const ring = document.createElement('div'); ring.id = 'bv-cursor-ring';
document.body.appendChild(dot);
document.body.appendChild(ring);
let mx = 0, my = 0, rx = 0, ry = 0;
document.addEventListener('mousemove', e => {
mx = e.clientX; my = e.clientY;
dot.style.left = mx + 'px';
dot.style.top = my + 'px';
});
(function loop() {
rx += (mx - rx) * 0.12;
ry += (my - ry) * 0.12;
ring.style.left = rx + 'px';
ring.style.top = ry + 'px';
requestAnimationFrame(loop);
})();
const hoverSels = 'a, button, [role="button"], input, select, textarea, label, .product-card, .card';
document.querySelectorAll(hoverSels).forEach(el => {
el.addEventListener('mouseenter', () => { dot.classList.add('hover'); ring.classList.add('hover'); });
el.addEventListener('mouseleave', () => { dot.classList.remove('hover'); ring.classList.remove('hover'); });
});
document.addEventListener('mouseleave', () => { dot.style.opacity = '0'; ring.style.opacity = '0'; });
document.addEventListener('mouseenter', () => { dot.style.opacity = '1'; ring.style.opacity = '1'; });
}
/* ─── 3. PAGE LOAD VEIL ─────────────────────────────────────── */
function initVeil() {
const veil = document.createElement('div');
veil.id = 'bv-veil';
document.body.appendChild(veil);
requestAnimationFrame(() => {
setTimeout(() => veil.classList.add('gone'), 100);
setTimeout(() => veil.remove(), 1100);
});
}
/* ─── 4. SCROLL REVEAL ──────────────────────────────────────── */
function initScrollReveal() {
const selectors = [
'.product-card', '.product-item', '.product-grid-item',
'.grid__item', '.collection-item', '.card', '.card--product',
'h1', 'h2', 'h3', '.hero__title', '.banner__heading',
'.rte', '.product__description', '.product__title',
'.featured-collection', '.section', 'section',
'.announcement-bar', '.footer__title'
].join(', ');
const candidates = document.querySelectorAll(selectors);
const seen = new WeakSet();
let delay = 0;
candidates.forEach((el, i) => {
if (seen.has(el)) return;
seen.add(el);
el.classList.add('bv-reveal');
if (i % 3 === 1) el.classList.add('bv-reveal-delay-1');
if (i % 3 === 2) el.classList.add('bv-reveal-delay-2');
});
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('bv-visible');
io.unobserve(e.target);
}
});
}, { threshold: 0.12 });
document.querySelectorAll('.bv-reveal').forEach(el => io.observe(el));
}
/* ─── 5. SHIMMER ON PRODUCT IMAGES ─────────────────────────── */
function initProductShimmer() {
const cards = document.querySelectorAll(
'.product-card, .product-item, .grid__item, .card--product, .card'
);
cards.forEach(card => {
const img = card.querySelector('img');
if (img) {
card.classList.add('bv-product-card');
const wrap = img.closest('.card__media, .product-card__image, .product__media') || img.parentElement;
wrap.classList.add('bv-product-img-wrap');
card.classList.add('bv-shimmer');
}
});
}
/* ─── 6. GOLD MARQUEE BAR ───────────────────────────────────── */
function initMarquee() {
// Insert after header / announcement bar
const anchor = document.querySelector('header, .header, .site-header, #shopify-section-header');
if (!anchor) return;
const messages = [
'Free Delivery on Orders Over ₹999',
'Premium Streetwear',
'New Drops Every Week',
'Crafted with Intent',
'Limited Editions',
'benevossa.com',
];
const track = document.createElement('div');
track.id = 'bv-marquee-track';
// Double for seamless loop
[...messages, ...messages].forEach((msg, i) => {
const span = document.createElement('span');
span.className = 'bv-marquee-item';
span.textContent = msg;
const dot = document.createElement('span');
dot.className = 'bv-marquee-dot';
dot.textContent = '◆';
track.appendChild(span);
track.appendChild(dot);
});
const bar = document.createElement('div');
bar.id = 'bv-marquee-bar';
bar.appendChild(track);
anchor.insertAdjacentElement('afterend', bar);
}
/* ─── 7. SMOOTH INTERNAL LINK TRANSITIONS ───────────────────── */
function initLinkTransitions() {
document.addEventListener('click', e => {
const link = e.target.closest('a');
if (!link) return;
const href = link.getAttribute('href');
if (!href || href.startsWith('#') || href.startsWith('javascript')
|| href.startsWith('mailto') || href.startsWith('tel')
|| link.target === '_blank') return;
try {
const url = new URL(href, location.href);
if (url.hostname !== location.hostname) return;
} catch { return; }
e.preventDefault();
document.body.style.transition = 'opacity 0.35s ease';
document.body.style.opacity = '0';
setTimeout(() => { location.href = href; }, 370);
});
}
/* ─── 8. IMAGE LAZY FADE ─────────────────────────────────────── */
function initImageFade() {
document.querySelectorAll('img').forEach(img => {
if (!img.complete) {
img.classList.add('bv-loading');
img.addEventListener('load', () => img.classList.remove('bv-loading'));
}
});
}
/* ─── 9. PARALLAX HERO ───────────────────────────────────────── */
function initParallax() {
const hero = document.querySelector(
'.hero, .hero__image, .banner, .banner__image, [class*="hero"] img, [class*="banner"] img'
);
if (!hero) return;
window.addEventListener('scroll', () => {
const y = window.scrollY;
hero.style.transform = `translateY(${y * 0.25}px)`;
}, { passive: true });
}
/* ─── 10. FOOTER GOLD LINE ───────────────────────────────────── */
function initFooterAccent() {
const footer = document.querySelector('footer, .site-footer, #shopify-section-footer');
if (!footer) return;
const line = document.createElement('div');
line.style.cssText = `
width: 100%; height: 1px;
background: linear-gradient(90deg, transparent, #d4af72, transparent);
opacity: 0.4;
`;
footer.prepend(line);
}
/* ─── INIT ─────────────────────────────────────────────────── */
function init() {
initVeil();
initCursor();
initScrollReveal();
initProductShimmer();
initMarquee();
initLinkTransitions();
initImageFade();
initParallax();
initFooterAccent();
console.log('%cBEVENOSSA ✦ Luxury Mode Active', 'color:#d4af72;font-family:serif;font-size:13px;');
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();