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 ERROR = "ERROR";
const formStates = [INIT, SUBMITTING, ERROR, SUCCESS] as const;
function NewsletterForm() {
return (
<input type="email" placeholder="
Enter your email" />
<Button type="submit">Subscribe</Button>