Crav Burgers, how it’s made: the burger that stacks itself, the ingredient rope and the juggling footer

Crav Burgers is the site of CRAV, a smash burger joint that says it was born in 1997 in Navarra, Spain: toasted buns, patties smashed on the flat top, cheddar and a chili honey glaze. There are four pages, Home, Burgers, Spices and Contact. It is a site that makes you hungry and is not ashamed of being a cartoon: the background is a baking-paper beige, #f5e3cd, the headings are tomato red, #f91814, the mustard is #ffd750 with a darker #f4a804, and every drawing has a burgundy outline, #4C0016. The typefaces are two Google Fonts sign faces: Mouse Memoirs, tall and narrow, for almost everything, and Modak, round and puffy like bubble gum, for the brand. On Awwwards it was Site of the Day on 13 June 2026, scored 7.25 by the jury, and won the Developer Award, 7.15. It is signed by the studio Anyflow with Vasav Prajapati, Pritam Das and Gaurav Verma.

It is a Next.js 16.2 site, with React 19. The animation is GSAP 3.15, with ScrollTrigger, SplitText, MorphSVG, MotionPath, Inertia and ScrollToPlugin, and the smooth scrolling is Lenis, with a duration of 1.2 seconds, driven by the GSAP ticker. The rest is hand-drawn SVG, lots of it: the loader burger alone has more than thirty paths. The values we quote come from the public code, the minified chunks the site loads, put back in order.

We take it apart in three moments, with a demo rebuilt from scratch for each, in the site’s full colours, for an invented burger bar, STAKK: the drawings, the words and the code are ours. From the site we took the ideas and, where we say so, the numbers.

The burger that stacks itself

The loader is a burger that makes itself on a red background. Down from above come the bottom bun, the patty, the cheese, the tomato, the lettuce and the sesame top bun, and with each layer the stack squashes for a moment; at the bottom a line of text says what is going on in the kitchen, TOASTING THE ARTISAN BUN, SEARING THE GLAZED PATTY, MELTING CHEDDAR CHEESE, and a mustard bar fills up. At the end crumbs burst out, the burger does a little hop, READY TO CRAV! appears and three curtains of colour lift one after the other, their edge curving, uncovering the page.

It is a single GSAP timeline. The layers start 800 pixels higher, transparent and at 0.8 of their size, and fall one every 22 hundredths of a second, in 0.32 seconds with power1.in, which speeds up like a real weight. When a layer lands it starts 12 degrees off, either way at random, and settles back to its own tilt, minus 2 degrees for the patty, plus 1 for the cheese, minus 4 for the tomato, plus 3 for the lettuce, in 0.45 seconds with back.out(2.5); meanwhile the whole stack squashes, 0.88 tall and 1.06 wide in six hundredths, bounces to 1.03 and 0.98 and straightens up in twelve. The counter goes from 0 to 100 in a second and a half. At 1.42 seconds fourteen crumbs, mustard, white and green, shoot from the centre in a circle between 110 and 200 pixels away, slightly upwards, and fade in 0.8 seconds; three tenths later the stack jumps 50 pixels, growing to 1.08, and comes down with bounce.out.

The curtains are three full-screen SVGs, 100 by 100 units stretched without keeping proportions, each with a single path: a rectangle whose bottom side is a quadratic curve with its control point in the middle. Red is in front, then orange, #EF6F2E, then burgundy. To lift them the site animates three numbers, the left side, the right side and the centre: the sides rise in 0.8 seconds with power2.inOut, the centre in 1.1 with power4.inOut, so it lags behind and the edge sags like a heavy curtain. The three curtains start 12 hundredths apart, and meanwhile the burger flies away upwards, a thousand pixels in three quarters of a second.

In our demo the burger is drawn by us and up close: a glossy bun with fourteen sesame seeds, the cut crumb, a smashed patty with its crust and dripping juices, cheddar that drips after landing, tomato with its seeds, onion, curly lettuce and pickle, steam rising; it all lands on a wooden board whose shadow spreads with every layer, and the curtains are glossy sauce, with drops hanging from the edge as they rise. The text is STAKK’s. The fall, the 22-hundredth timing, the tilts, the squash, the fourteen crumbs, the hop and the three curtains with sides and centre on different timings come from the site; the brand page that slides in under the curtains and the replay button are ours.

The ingredient rope

On a computer the site’s pointer drags a white rope behind it, and four ingredients are threaded on the rope, lettuce, tomato, cheese and patty, each in a round of frosted glass. When the mouse moves the rope stretches and snakes; when it stops it gathers up under the tip. Over the Order Now button the rope disappears, so as not to cover it.

The rope is made of eight points, 8 pixels apart. The first follows the pointer in five hundredths of a second; every other point moves only if the one before it has gone more than 8 pixels away, and then it moves towards it, up to that distance, in 0.12 seconds plus one hundredth per position, with power3.out: the tail always arrives a little after the head. On every frame the site redraws an SVG path through the midpoints with quadratic curves, so the rope stays smooth even with few points. The trick of the rope that gathers up is in its length: every movement sets it back to 8 pixels, and straight after GSAP takes it to zero in half a second with expo.out. While you keep moving, the rope stays long; as soon as you stop, the points close in until they touch.

The ingredients sit on points 0, 3, 5 and the last one, and each turns to follow the direction of the stretch of rope before it, measured with the arctangent. Over an element with the data-cursor-hide attribute, the Order Now button, everything fades out in six tenths of a second with power3.inOut. The rope only exists with a real mouse, a fine pointer, and only if the visitor has not asked for less motion.

In our demo the ingredients are drawn by us and the rope also follows a finger on the phone while it drags. The eight points, the five hundredths of the head, the delay growing along the tail, the curves through the midpoints, the length going back to zero in half a second, the four ingredient positions and the rope vanishing over the button come from the site, and so do the heading that pops letter by letter and the button that changes shape; the points sit 16 pixels apart, though, twice as far, because at 8 the beads covered each other, and the burger bar stage with its stickers is ours.

The juggling footer

At the bottom of the page there is a beige footer with the links, the line Smashed patties · toasted buns · est. 1997 and a huge CRAV logo, red with a white outline, as wide as the screen. In front of it, four ingredients are thrown in the air one after another, spinning and falling back, never stopping, as if in a juggler’s hands.

Each ingredient has its own lane, at 12, 34, 56 and 80 per cent of the width, and every throw is a new timeline with numbers drawn at random. It starts 22 hundredths of the screen height below the centre, rises to a peak between 38 and 60 hundredths higher in 0.9 to 1.3 seconds with power2.out, which slows down on the way up, and falls back with power2.in, which speeds up on the way down, in 1.15 to 1.5 times the rise: gravity made of two curves. Meanwhile the ingredient drifts sideways with sine.inOut and spins, on a linear curve, between 220 and 600 degrees in either direction; in the last quarter of a second it fades out, and after a pause of 0.2 to 0.9 seconds it goes again. The first throw of each ingredient is staggered by 55 hundredths, plus a little at random. On the phone the numbers are smaller: peaks between 12 and 18, spins between 80 and 180 degrees, slightly bigger ingredients.

When the browser tab is hidden, the throws in progress pause and pick up again on return. With reduced motion the ingredients do not fly: they appear hanging in place, each with a small hand-written tilt. The CRAV logo comes in with its letters popping up from below with back.out(2.6), in three quarters of a second.

In our demo the ingredients are ours and the footer is STAKK’s, with its links and a themed hover. The four lanes, the peaks, the ratio between rise and fall, the drift, the spins, the pauses, the stagger, the phone numbers, the reduced-motion positions and the three-timed wave of the section edges, which we put at the top of the stage, come from the site; the throws measured on the real height of the stage, so they fit a small box too, are ours.

The other details

The home page burger comes in from half its size, rotated 5 degrees and 100 pixels lower, in a second and a half with back.out(1.5), and then floats forever, up and down 15 pixels every two and a half seconds. The headings come in two kinds: those that rise line by line from under a mask, with SplitText, in 1.4 seconds with a line every 15 hundredths, and those that pop word by word, from nothing to full size with back.out(2.35), a word every 55 thousandths, each from a random height and tilt. Sections do not end in a straight line: the edge is a wave, a path with three S curves in the colour of the section above, whose points rise and fall on three different timings, 1, 2 and 1.8 seconds, in a timeline that plays back and forth forever; and when you scroll down to it, it stretches up to one and a half times its height, like jelly dripping. Even the browser tab is animated: the title changes every 0.8 seconds, Sizzling, Grilling, Flipping, Serving, Enjoy, and during loading it says Craving.

The Order Now button is a red blob with a white outline that, under the mouse, takes with MorphSVG a random shape from those drawn, in half a second with back.out, and returns to its own on leave. In the take away section a plane flies along a path as you scroll, with MotionPath, and photos of five cities, Berlin, London, New York, Sydney and Tokyo, pop out when the plane passes 14, 28, 50, 68 and 91 per cent of the route. The city photos can also be pushed with the mouse: when the pointer leaves they take its speed, multiplied by thirty, and brake with Inertia. Between pages the three curtains come back, but reversed: they rise from the bottom with the centre arriving first, red, orange and mustard, with the word Craving blinking in the middle.

Where it stumbles

The loader does not remember who has already been there: every time a page is opened or reloaded, scrolling is locked and the burger builds itself again, for about four seconds. The first time it is a party, the tenth a wait. And the rope and the jugglers are the friendliest effects on the site, but they are not there on the phone: the rope is off without a mouse and hidden below 768 pixels.

Across the whole page text cannot be selected, because the body has user-select none: anyone wanting to copy the address or the opening hours cannot. The home page JavaScript chunks weigh about 2 MB together before compression. The site does respect reduced motion almost everywhere, though: lines and words only fade in, the ingredients stay still, the rope is not there.

What we take away

A burger site that feels like a burger: the loader is the recipe, the cursor threads the ingredients, the footer makes them fly. And physics made with very little: a fall is power1.in, a bounce is a squash in three beats, gravity is a rise with power2.out and a longer fall with power2.in. The same two curves, changing only the numbers, do everything else.