alaguraj/my-dosa-place-cinematic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add ChefShowcase and EntranceExperience components with canvas spark animations

Browse Source
This commit is contained in:
Alaguraj0361 2026-07-21 20:08:52 +05:30
parent 44f0134a49
commit d2ec0e574d
2 changed files with 11 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/ChefShowcase.tsx
View File

@ -204,17 +204,7 @@ export default function ChefShowcase() {
className="lg:col-span-5 flex justify-center relative" className="lg:col-span-5 flex justify-center relative"
> >
{/* 30+ Years Experience Badge Overlay */}
<div className="hidden lg:flex absolute -top-6 -right-6 w-24 h-24 sm:w-28 sm:h-28 rounded-full border border-[#bc9e65]/80 bg-black/45 backdrop-blur-md z-30 shadow-2xl flex-col items-center justify-center text-center p-3 select-none pointer-events-none">
<div className="absolute inset-1.5 border border-[#bc9e65]/35 rounded-full pointer-events-none" />
{/* Gold Flower Icon */}
<svg className="w-4 h-4 text-[#bc9e65] opacity-85 mb-0.5" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 2L11.5 7L16 8L11.5 9L10 14L8.5 9L4 8L8.5 7Z" />
</svg>
<span className="font-serif text-lg sm:text-[18px] font-bold text-[#bc9e65] leading-none">30+</span>
<span className="font-sans text-[7px] sm:text-sm tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase mt-0.5">Years</span>
<span className="font-sans text-[6px] sm:text-[7px] tracking-[0.1em] text-[#e4d7bc] uppercase font-semibold leading-relaxed mt-0.5 max-w-[80px]">Of Culinary Excellence</span>
</div>
{/* Seamless Image Wrapper */} {/* Seamless Image Wrapper */}
<div className="hidden lg:block relative w-full max-w-[380px] sm:max-w-[420px] aspect-[4/5] overflow-hidden group"> <div className="hidden lg:block relative w-full max-w-[380px] sm:max-w-[420px] aspect-[4/5] overflow-hidden group">

20
src/components/EntranceExperience.tsx
View File

@ -87,7 +87,7 @@ function CinematicFlight({ progress }: { progress: number }) {
const { width, height } = useThree((state) => state.viewport); const { width, height } = useThree((state) => state.viewport);
// Compute facade dimensions based on dusk photo aspect ratio // Compute facade dimensions based on dusk photo aspect ratio
const aspect = 1920 / 864; const aspect = 1920 / 864;
const planeH = height; const planeH = height;
const planeW = planeH * aspect; const planeW = planeH * aspect;
@ -162,7 +162,7 @@ function CinematicFlight({ progress }: { progress: number }) {
// 5. Reactive Opacity Updates inside useFrame to prevent unmounting stutters // 5. Reactive Opacity Updates inside useFrame to prevent unmounting stutters
const extOpacity = progress < 0.25 ? 1 : Math.max(0, 1 - (progress - 0.25) / 0.15); const extOpacity = progress < 0.25 ? 1 : Math.max(0, 1 - (progress - 0.25) / 0.15);
let intOpacity = 0; let intOpacity = 0;
if (progress >= 0.08 && progress <= 0.25) { if (progress >= 0.08 && progress <= 0.25) {
intOpacity = (progress - 0.08) / 0.17; intOpacity = (progress - 0.08) / 0.17;
@ -301,7 +301,7 @@ export default function EntranceExperience({ onProgress }: { onProgress?: (progr
scrollTrigger: { scrollTrigger: {
trigger: container, trigger: container,
start: "top top", start: "top top",
end: "+=450%", end: "+=450%",
scrub: 1.2, scrub: 1.2,
pin: true, pin: true,
onUpdate: (self) => { onUpdate: (self) => {
@ -382,18 +382,18 @@ export default function EntranceExperience({ onProgress }: { onProgress?: (progr
{/* Inner traditional gold frame */} {/* Inner traditional gold frame */}
<div className="absolute top-2 left-2 right-2 bottom-2 border border-gold/15 pointer-events-none rounded-[22px]" /> <div className="absolute top-2 left-2 right-2 bottom-2 border border-gold/15 pointer-events-none rounded-[22px]" />
<span className="font-sans text-[#188754] text-base sm:text-base tracking-[0.4em] uppercase font-bold block mb-2.5 text-center mt-1"> <span className="font-sans text-[#188754] text-xs sm:text-sm tracking-[0.15em] sm:tracking-[0.22em] uppercase font-bold block mb-2 text-center mt-1 whitespace-nowrap">
AUTHENTIC SOUTH INDIAN · PURE VEGETARIAN AUTHENTIC SOUTH INDIAN
</span> </span>
<h3 className="font-serif text-[#188754] text-xl sm:text-2xl tracking-[0.15em] uppercase font-bold mb-3 text-center"> <h3 className="font-serif text-[#188754] text-xl sm:text-2xl tracking-[0.12em] font-bold mb-3 text-center leading-tight">
A Royal Banquet in the Heart of Waterloo A Royal Banquet in the<br />Heart of Waterloo
</h3> </h3>
<div className="w-24 h-[1px] bg-gradient-to-r from-transparent via-[#d8c396] to-transparent mx-auto mb-4" /> <div className="w-24 h-[1px] bg-gradient-to-r from-transparent via-[#d8c396] to-transparent mx-auto mb-3" />
<p className="font-sans text-sm sm:text-lg text-stone-800 leading-relaxed tracking-wider font-medium text-justify"> <p className="font-sans text-xs sm:text-sm md:text-base text-stone-800 leading-relaxed tracking-wide font-medium text-center">
A tradition older than memory. The table is set for a royal banquet on fresh banana leaves—dosas roasted in pure ghee to a crisp, golden perfection, slow-simmered sambar, and chutneys hand-ground fresh every morning. Served exactly as it was meant to be. 100% pure vegetarian. A royal banquet served on fresh banana leaves—crisp ghee dosas, slow-simmered sambar, and chutneys hand-ground fresh every morning. 100% pure vegetarian.
</p> </p>
</motion.div> </motion.div>
)} )}