Sprinkle

# Build a website in the "Sprinkle" style

You are building a production-ready website. Follow the design system below exactly and adapt the content to the project. The design comes from the Qalib library (design No. 224).

## 1. The project

- Name: [fill in]
- Type of site: [fill in]
- What it does: [fill in]
- Languages: Arabic and English: Arabic first (RTL) and a full English version (LTR) with a language switch
- Pages: One page with sections and anchor links
- Contact details: [fill in]
- Assets: No photos yet: use suitable placeholders and mark each one TODO for replacement.

## 2. Visual reference

- Live demo (Arabic): https://qalib.omardeek.tech/demos/sprinkle/ar.html
- Live demo (English): https://qalib.omardeek.tech/demos/sprinkle/en.html

Each demo is one HTML file with all its CSS in a <style> tag. Download the raw file (for example `curl -s <url>`), not a summary of it, and treat its CSS as the source of truth for spacing, sizes and effects. The demo's business and text are fictional: never copy them.

## 3. Design DNA: Interactive

Sites that move with their visitor: a photo that grows to fill the screen as you scroll, layers that follow the mouse, a light that reveals what lies underneath, a curtain that opens, sections read word by word. Every interaction has a still version that shows all the content to people who prefer less motion.

- **Typography:** Huge headlines in a strong display face (up to 7rem) on short lines, body text in a clear sans; the big words are part of the interaction.
- **Colour:** One strong background (very dark or very light) and a single vivid accent; the photos carry the rest of the colour.
- **Layout:** A full-screen hero that holds in place (sticky) while the scroll drives it, then regular sections broken by other pinned moments (a statement that lights up, a sideways rail of cards).
- **Shapes:** Pill buttons, large rounded photos that become full-bleed, floating cards with soft shadows.
- **Imagery:** Big, high-quality photos that work full screen, plus several smaller ones for layers and trails.
- **Motion:** Linked to the scroll and the pointer, not to time: a progress value from 0 to 1 drives the transforms, pointer movement is eased, buttons are magnetic; all of it stops with prefers-reduced-motion.
- **Details:** A progress bar along the top, a "scroll down" hint that fades once you start, a ring cursor that grows over links, counting numbers.
- **Avoid:** Scroll-jacking (never change or block the wheel), content that stays hidden without JavaScript, effects that get in the way of reading, heavy libraries for what CSS variables and requestAnimationFrame can do.

**This design in particular:** Sugar pink and caramel yellow; the sweets follow the mouse and fall like sprinkles, and the menu is a set of cheerful cards.

## 4. Design tokens

```css
:root {
  --bg: #FFF0F3; /* page background */
  --surface: #FFFFFF; /* cards, panels, alternate sections */
  --ink: #3A1626; /* main text */
  --muted: #7D5868; /* secondary text */
  --accent: #E8467C; /* buttons, links, highlights */
  --accent2: #F5B83D; /* second highlight */
  --line: #F4D7DF; /* rules and borders */
  --on-accent: #FFFFFF; /* text on the accent colour */
  --radius: 28px;
}
```

- Colour scheme: light
- Fonts (available on Google Fonts and fontsource; self-host them):
  - Arabic headings: Lemonada (400, 700)
  - Arabic text: Tajawal (400, 500, 800)
  - Latin headings: Young Serif (400)
  - Latin text: Outfit (300, 400, 600, 800)
- Type scale: h1: clamp(2.7rem, 6.2vw, 5.4rem) · h2: clamp(2rem, 4.2vw, 3.3rem) · h3: 1.25rem · text: 17px with 1.7 line height (Arabic 18px and 1.9) · max width 1200px · section spacing clamp(72px, 10vw, 136px)

## 5. Page structure

The demo shows a Sweets & bakery. Build the sections with these visual treatments, in this order:

1. **Header**: A floating rounded "pill" menu with a frosted background, detached from the top edge.
2. **Hero**: A huge centred headline on a very light background; moving the pointer drops photos behind it that pop in and fade.
3. **About** «About us»: A wide photo with a text card overlapping its lower edge.
4. **Main offering** «The sweets»: a grid of cards (photo or icon, title, short text, price or note)
5. **Process** «Celebration cakes»: numbered steps in a row with big numbers
6. **Testimonials** «They said»: three testimonial cards with initials avatars
7. **Contact** «Order»: A large card on a tinted background: contact details on one side, the hours and button on the other.
8. **Footer**: the business name set huge across the footer, above the columns

## 6. Motion

Rich: the headline rises word by word, 90ms staggered reveals, magnetic buttons, parallax photos and counters; all of it off under prefers-reduced-motion.

**Decorations in this design:**
- a thin progress bar along the top edge showing the scroll position

**Interactions:** Build them without libraries. Pinned sections are tall, with a stage inside that is `position: sticky; top: 0; height: 100svh`. One requestAnimationFrame-throttled scroll handler writes each section's progress p (0 to 1) to a CSS variable, and CSS turns it into transforms, `clip-path` and opacity with `calc()`. Pointer effects write eased variables (−1 to 1, and pixel positions) in a single animation loop that runs only while the section is on screen; with no pointer for two seconds the values drift slowly on their own, so touch screens see the effect too. Pin only when JavaScript runs and `prefers-reduced-motion` is not set; otherwise every section is a still layout with all of its content visible (the zoom photo framed with its call to action, the curtain open, the statement fully lit, the rail scrollable by hand). Never change the scroll speed or block the wheel.

- Trail: every time the pointer travels 85px, drop one of the business's photos (portrait, about 15vw wide) at the pointer with a random tilt of ±8°; it pops in (scale 0.45 to 1), fades out over about 1.1s and is removed, with at most 14 on screen. The eyebrow, headline and lead are white with `mix-blend-mode: difference` above the photos, so they read on the light background and invert over the photos (the hero needs `isolation: isolate` and its own background).

## 7. Technical requirements

- **Stack:** Choose the stack that fits the project; prefer static HTML, CSS and JavaScript unless it needs more.
- Semantic HTML, mobile first, adapting at 360, 768, 1024 and 1440px, with no horizontal scrolling.
- Arabic: <html lang="ar" dir="rtl">, CSS logical properties (margin-inline-start, inset-inline-end…), mirrored directional icons, never letter-space or uppercase Arabic, and Arabic text at 18px or more.
- Accessibility: WCAG AA contrast, visible focus states, alt text on images, and all motion off under prefers-reduced-motion.
- Performance: self-hosted fonts with font-display: swap and only the weights and subsets in use, WebP or AVIF images with set dimensions, lazy loading below the first screen, and no heavy libraries for simple effects.
- SEO: a title and description for every page, Open Graph, a favicon, and LocalBusiness structured data where relevant.
- Buttons: WhatsApp links as https://wa.me/<number>, phone as tel:, email as mailto:.

## 8. Delivery

1. Start with the tokens and base styles, then build the sections from top to bottom.
2. Compare the result with the live demo at phone and desktop widths before you finish.
3. Finish with how to run the site and how to deploy it.

Paste it into Claude Code inside a new project folder.