Skip to content

feat: add BASHIR luxury streetwear brand showcase site#298

Open
bashiren wants to merge 3 commits into
nextlevelbuilder:mainfrom
bashiren:claude/goofy-lovelace-3a6d9e
Open

feat: add BASHIR luxury streetwear brand showcase site#298
bashiren wants to merge 3 commits into
nextlevelbuilder:mainfrom
bashiren:claude/goofy-lovelace-3a6d9e

Conversation

@bashiren
Copy link
Copy Markdown

@bashiren bashiren commented May 5, 2026

.

Thomas Schinazi and others added 3 commits May 5, 2026 11:47
Apple-inspired cinematic single-page site for the BASHIR concept brand,
demonstrating the ui-ux-pro-max design intelligence applied to a luxury
fashion product type.

Includes loader, custom cursor, smooth scroll (Lenis), hero word-reveal,
silver marquee, scroll-scrubbed story reveal, asymmetric product grid,
multi-panel parallax immersion, and minimal footer. GSAP + ScrollTrigger
for animations; prefers-reduced-motion respected.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ger sync

Root cause of jitter was a double Lenis raf loop (driven by both
requestAnimationFrame and gsap.ticker), advancing Lenis twice per frame.

JS:
- Single raf via gsap.ticker only; lenis.on('scroll', ScrollTrigger.update)
- gsap.ticker.lagSmoothing(0); ScrollTrigger.config ignoreMobileResize+limitCallbacks
- Cursor: gsap.quickTo (no per-frame style.transform writes)
- All scrub triggers use scrub: 0.6 + invalidateOnRefresh: true
- Reveals use once:true to remove flicker on micro-scroll
- Mobile: parallax disabled on products, intensity halved on immersion
- ScrollTrigger.refresh() runs after all images load → no early/late firing
- Hero parallax: explicit fromTo so entrance and parallax don't collide

CSS:
- Removed scroll-behavior:smooth on html (fights Lenis)
- Lenis recommended class hooks added
- Cursor centered via margin (not transform) so quickTo controls translate
- Removed CSS transform on .hero__image and .product img — owned by GSAP
- Product hover: filter only (transform was wiping GSAP yPercent → snap)
- will-change:transform + translateZ(0) on parallax layers (heroes/panels/marquee)
- Immersion images +10% height to absorb parallax range without gaps

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The previous commit dropped bashir/index.html during the file refresh.
Restored from HEAD~1 unchanged — only css/main.js were meant to update.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant