Undertone: an animated background generator that exports to Next.js and drops onto your website in seconds ✨

I built Undertone, a website background generator.

A background is the undertone of a website, the texture and feeling underneath it all.

I got tired of coding them and burning through AI credits without getting the result I wanted. They all end up looking the same, and tiny details like the speed and the pauses are hard to change. So I built Undertone: pick a feeling, customize everything, draw your own, then export straight to Next.js and drop it into your site in seconds. It's just text, so it stays light and loads fast.

Built in Figma Make for #ConfigMakeathon ✨ Try it: https://undertone.figma.site Also available on the Figma community: https://www.figma.com/community/file/1649138950603776862 Share on LinkedIn

Exporting as plain text for performance is the right call. Most animated background solutions are either canvas-heavy or webGL and they kill Lighthouse scores. The 'pick a feeling' framing is also a smarter entry point than asking users to pick an effect type.

Cartographer: Group Planning, Mapped Fairly

Cartographer is a group planning app designed to make choosing a meetup spot easier, fairer, and way less chaotic. I created it for the #configmakeathon

Instead of letting the group chat spiral with “I’m fine with anything,” “that’s too far,” or “where should we go?”, Cartographer turns the planning process into a shared map. One person creates a plan, invites their crew, and each member adds their starting location, transportation method, max travel time, budget, and preferences. From there, Cartographer helps uncover meetup spots that work best for the whole group.

Key features include:

Shared Map Links – Create a plan and invite others with a simple shareable link.

Crew Manifest – View everyone who has joined the map, including their travel method, budget, and preferences.

Transportation-Aware Planning – Cartographer considers whether someone is walking, driving, or using transit.

Fair Recommendation Scoring – Suggested spots are ranked based on how well they work for the group overall.

Preference Filters – Members can note parking needs, transit friendliness, outdoor preferences, accessibility needs, dietary notes, and hard no’s.

Crew Chat / Message Scroll – Groups can keep the planning conversation inside the map.

Save Map by Email – Users can save and return to their map later.

Treasure Map Theme – The app uses parchment styling, wax seals, route language, and “X marks the spot” visuals to make planning feel more fun and memorable.

Cartographer was built with a React/Figma Make frontend and a Supabase Edge Functions backend. The app uses a playful old-map interface, but the core goal is practical: help groups make plans without one person carrying all the coordination or one member always getting stuck with the longest drive.

In short, Cartographer helps groups find the fairest place to meet before the group chat spirals.

Live link: https://www.cartographerplan.com/

Project link: https://www.figma.com/make/MiCFYw4NVYUVGqEbBOvdCQ/Treasure-Map-UI-Design?t=wChweYDNksIlm5mP-1

This is such a genius idea!