/* Garbashala — Step Detail (Do Taali) */ const StepDetail = () => { const parts = (window.location.hash || "").replace(/^#/, "").split("/").filter(Boolean); const slug = parts[1] || "be-taali"; const found = window.GARBA_STEPS.findIndex((x) => x.slug === slug); const idx = found >= 0 ? found : 0; const s = window.GARBA_STEPS[idx]; const next = window.GARBA_STEPS[(idx + 1) % window.GARBA_STEPS.length]; const taglines = [ "the heartbeat", "the second clap", "the bouncing one", "light on the toes", "the swing", "tricky to learn", "the folk beat", "wings out", ]; const [scrollY, setScrollY] = React.useState(0); React.useEffect(() => { const onScroll = () => setScrollY(window.scrollY || window.pageYOffset || 0); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); // 0–200: hero. 200–600: shrink. 600+: minimized in bottom-right corner. const t = Math.min(1, Math.max(0, (scrollY - 200) / 400)); const videoStyle = t < 0.02 ? { position: "relative", width: "100%", height: 540, transition: "all 0.2s", margin: "0 auto", } : { position: "fixed", right: 28, bottom: 28, width: 280, height: 200, transition: "all 0.6s cubic-bezier(0.4, 0, 0.2, 1)", boxShadow: "0 8px 30px rgba(42,24,16,0.35)", zIndex: 2147483647, }; return (
{/* Breadcrumb */}
steps ↳ {s.name.toLowerCase()}
{/* HERO + TITLE */}
{`step #${idx + 1} · ${taglines[idx] || "in the circle"}`} ✦

{s.name.toLowerCase()}.

{s.gujarati} {s.translit} · "{s.meaning.toLowerCase()}"
{"★".repeat(s.difficulty)} {s.difficulty <= 1 ? "beginner" : s.difficulty <= 2 ? "easy" : s.difficulty <= 3 ? "intermediate" : "advanced"} ♪ {s.beats} beats tempo · {s.tempo.toLowerCase()} {s.region.toLowerCase()}
{/* VIDEO HERO (shrinks on scroll) */}
0.5 ? "12px" : "12px 4px 14px 6px / 6px 14px 4px 12px", border: t > 0.5 ? "2px solid var(--paper)" : "1.5px solid var(--ink)", overflow: "hidden", background: `linear-gradient(135deg, ${s.color}, var(--terracotta-deep))`, }}>
0.5 ? 18 : 32, marginBottom: 8 }}> [ slow-motion video ]
{t < 0.5 && (
a dancer in chaniya choli, doing 8 cycles of {s.name.toLowerCase()}
)}
0.5 ? 8 : 16, left: t > 0.5 ? 8 : 16, background: "rgba(0,0,0,0.5)", color: "white", padding: t > 0.5 ? "3px 8px" : "6px 14px", borderRadius: 12, display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: t > 0.5 ? 12 : 16, }}> {t > 0.5 ? "0:24" : "looping · 0:24"}
{t < 0.5 && (
speed: 0.5x 0.75x 1x
)}
{t < 0.1 && (
scroll for the breakdown ↓
)}
{/* INTRO PROSE */}

{s.summary} This is the answer.

{slug === "be-taali" ? "Two steps, two claps. Right foot forward, clap. Left foot forward, clap. Repeat forever. The whole circle moves counter-clockwise around the diya in the middle. Every single garba night opens with this — it's the warm-up that wakes your feet up." : `From the ${s.region}. Counts in ${s.beats}. ${s.tempo} tempo. Dance it in the circle around the diya, counter-clockwise, with everyone else.`}

{/* THE COUNT */}
the count ↓

{s.beats === 2 ? "two beats, repeated" : `${s.beats} beats, repeated`}

{/* FOOTWORK DIAGRAM */}
↓ where your feet go ↓

footwork, top-down

Imagine looking down at your own feet from above. Right is rust, left is sage. The dotted arrow is where it travels next. Every clap happens on the beat the foot lands.

right left 👏 = clap moment
auntie tip ☕

Don't watch your own feet. Watch the person in front of you, half a beat behind. The circle pulls you along — that's the whole secret.

{/* DANCER PHOTOS — STEP BY STEP */}
↓ photographs of the real thing ↓

step by step, in pictures

{[ { n: 1, title: "ready position", body: "Feet together, weight even, hands at chest height." }, { n: 2, title: "right foot forward", body: "Step diagonally forward-right. Heel lands first." }, { n: 3, title: "first clap", body: "Hands meet at chest level, on the beat. Loud and proud." }, { n: 4, title: "left foot forward", body: "Bring left foot to meet right. Second clap, slightly higher." }, ].map(({ n, title, body }, i) => (
[ photo of dancer:
{title} ]

{title}

{body}

))}
{/* PRACTICE SONG */}
practice with ↓

a real garba song

{/* HISTORY / FACTS */}
a little history ✦

why two claps?

The simplest theory: two claps mark matching syllables in the chorus of most garba songs. Every Gujarati folk song is built on a 2-beat or 4-beat foundation, and be taali is the bare minimum that locks you into the pulse.

But there's also a spiritual reading. Garba comes from the Sanskrit{" "} garbha-deep — the womb-lamp. The diya in the middle of the circle represents life, and dancers circle it the way planets orbit the sun. Two claps echo the heartbeat — first sound a baby ever hears.

Whatever theory you like best, the result is the same: be taali is how every garba night begins. From temple courtyards in Vadodara to Diwali Mela in Edison, NJ.

{/* FOOTER */}
jai mata di ♡
); }; const BeatCounter = () => { const [active, setActive] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setActive((a) => (a + 1) % 8), 700); return () => clearInterval(id); }, []); const cells = Array.from({ length: 8 }).map((_, i) => { const isClap = i % 2 === 1; const foot = i % 4 < 2 ? "R" : "L"; return { i, isClap, foot }; }); return (
{cells.map(({ i, isClap, foot }) => (
setActive(i)}>
{i + 1}
{isClap ? "👏 clap" : `step ${foot}`}
))}
← cycles 1, 2 → ← cycles 3, 4 → ▶ playing at 0.5× · click any cell to jump
); }; const FootDiagram = () => ( ← circle moves this way (counter-clockwise) R L starting position R 1 step + 👏 clap L 2 feet end up close together ↻ then repeat — forever ); const SongPlayer = () => { const [playing, setPlaying] = React.useState(false); const [progress, setProgress] = React.useState(0.34); const [tempo, setTempo] = React.useState(0.75); const bars = 80; return (
practice track ✦ public domain

Sanedo Re Sanedo

traditional folk · arr. by Hemant Chauhan · 1987
1:24 / 4:08
a great chorus to loop
{Array.from({ length: bars }).map((_, i) => { const h = 18 + Math.abs(Math.sin(i * 0.7) * Math.cos(i * 0.3)) * 38 + (i % 5) * 2; const past = i / bars < progress; return (
); })}
↓ loop region
tempo {tempo}×
setTempo(+e.target.value)} style={{ width: 140, accentColor: "var(--terracotta)" }} />
Gujarati lyrics ↓ download mp3
); }; /* Mobile version of step detail */ const MobileStep = () => { const parts = (window.location.hash || "").replace(/^#/, "").split("/").filter(Boolean); const slug = parts[1] || "be-taali"; const s = window.GARBA_STEPS.find((x) => x.slug === slug) || window.GARBA_STEPS[0]; return (
← steps ♡
[ slow-mo loop ] ▶ 0:24
step #{Math.max(1, window.GARBA_STEPS.findIndex((x) => x.slug === slug) + 1)} ✦

{s.name.toLowerCase()}.

{s.gujarati} · {s.meaning.toLowerCase()}
{"★".repeat(s.difficulty)} ♪ {s.beats} beats {s.tempo.toLowerCase()}

{s.summary}

↓ the count ↓
{[1, 2, 3, 4].map((i) => (
{i}
{i % 2 === 0 ? "👏" : `${i < 3 ? "R" : "L"}`}
))}
↓ where the feet go ↓
↓ practice with ↓
Sanedo Re Sanedo
traditional · 4:08
{Array.from({ length: 36 }).map((_, i) => (
))}
↓ step by step ↓
{["ready", "right →", "👏 clap", "left →"].map((t, i) => (
{i + 1}. {t}
))}
a little history ✦

why two claps?

Two claps mark matching syllables in every garba chorus — the bare minimum that locks you into the pulse. Spiritually, they echo the heartbeat: the first sound a baby ever hears, around the womb-lamp at the center of the circle.

next: tran taali →
); }; window.StepDetail = StepDetail; window.MobileStep = MobileStep;