back to lab

Gooey Menu

June 2024

A gooey menu with a plus icon that expands to show two more icons when clicked. The effect is achieved using a SVG filter and a checkbox input to toggle the menu without JavaScript. I use linear() easing function to animate the menu items. Note: The gooey effect may not function properly on Safari and some mobile browsers.

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>
        );
    }
}

References:

Subtle 3D Carousel
Draggable Curved Menu