Draggable Curved Menu

June 2024

A curved menu component that rotates while being dragged. It features famous furniture designs, with the middle item highlighted. The component is built using Framer Motion. A similar effect could be achieved with CSS's scroll() and animation-timeline, but this would not (yet) be fully functional on mobile devices.

Eero Aarnio Ball Chair

Verner Panton Chair

Eero Saarinen Tulip Table

Arne Jacobsen Egg Chair

Joe Colombo Elda Chair

Olivier Mourgue Djinn Chairs

Pierre Paulin Orange Slice Chair

George Nelson Coconut Chair

Isamu Noguchi Coffee Table

Warren Platner Coffee Table

Marc Newson Lockheed Lounge

Vitra Eames Lounge Chair

Mario Bellini Camaleonda Sofa

Eero Aarnio Pastil Chair

Pierre Cardin Dining Table

Marcel Breuer Wassily Chair

Alvar Aalto Savoy Vase

Le Corbusier LC4 Chaise Longue

Eileen Gray Bibendum Chair

Charles and Ray Eames Molded Plastic Chair

Olivetti Synthesis Office Chair

Giancarlo Piretti Plia Chair

Rodolfo Bonetto Boomerang Desk

Richard Sapper Tizio Lamp

Vico Magistretti Maralunga Sofa

Peter Ghyczy Garden Egg Chair

Paulin Globe Chair

Luigi Colani Rotor Table

Ross Lovegrove Go Chair

Ron Arad Well Tempered Chair

Unlock code snippet

Enter your email to access all code snippets and subscribe to my newsletter for updates.


import { useState } from "react";
import Button from "./ui/Button";

// Nice try lol, I promise I will not send you a tons of spam emails
// I just want to build a newsletter list to share my latest content with you 🥹

const INIT = "INIT";
const SUBMITTING = "SUBMITTING";
const ERROR = "ERROR";
const SUCCESS = "SUCCESS";

const formStates = [INIT, SUBMITTING, ERROR, SUCCESS] as const;


function NewsletterForm() {
  return (
    <form>
      <input type="email" placeholder="
        Enter your email" />
        <Button type="submit">Subscribe</Button>
        </form>
        );
    }
}

Gooey Menu

Popover Slide Selector