A library for unique and visually engaging web components.

Current components:

• Liquid Navbar: A navbar featuring a smoothly morphing SVG that "parts" around your navitems

Install via npm:

npm install amphiptere-css

Import a component in your project (ESM):

import 'amphiptere-css/dist/liquid-navbar.js';

Then use the custom element in your HTML:

liquid-navbar
   logo="/assets/amphiptere-css-logo.svg"
   items='[{"label":"Home","href":"/home","icon":"/assets/home.svg"}]'
   trailing='{"label":"Logout","href":"/logout","icon":"/assets/logout.svg"}'
   width="450"
   height="700"
   style="--navbar-background: linear-gradient(180deg, #232b6b 0%, #6a1e8a 100%); --nav-link-color: #fff;"

>gt;liquid-navbar>gt;

You can customize the look and feel using CSS custom properties:

Visit the live storybook demo page to view an interactive example

##Background

I saw this effect in a design mockup for a website and, while trying to recreate it, I realized that there wasn't a great way to accomplish it in the way I would want in native CSS. I decided to make the navbar a web component so it's modular and easily implemented in any projects that would like to use this effect without having to mess with SVGs for hours like I did.

I created the basic shape in Figma then exported it to an online SVG editor to determine which points affected what. Then, I created functions to manipulate those points in a way that would allow the SVG to "wrap" around the navbar components before adding interpolation to make it all smooth.

To manipulate the SVG, I first had to figure out what SVGs were and how they worked. I also had to manually find and edit each coordinate, which was extremely painful, but I learned a lot about the image format while doing it.

MIT