Getting Started — read this first
Set up GUMDROP in an afternoon
Everything below is editable from the Framer canvas. You will not need to open a code file unless you want to.
1. Change the logo
The wordmark lives in the Navigation component and again in the Main layout template footer. Both are plain text set in Bricolage Grotesque, so you can retype them or replace them with your own SVG. The small ® is a separate text layer with a slow loop rotation — delete it if your brand does not use one.
2. Change the palette
Open the Styles panel. Thirteen colour styles drive the entire site: Ink, Ink Raised, Ink Sunken, Paper, Paper Raised, Acid Lime, Electric Violet, Bubblegum, Tangerine, Ink Muted, Paper Muted and two rule colours. Edit a style and every section repaints. Do not hardcode new hex values on individual layers — change the style instead.
3. Change the fonts
Sixteen text styles reference three families: Bricolage Grotesque for display, Space Grotesk for interface and body, DM Mono for labels. Swap the family on the text styles and the whole scale follows. Each style already has desktop, tablet and phone sizes defined.
4. Edit the home page
Every home section is a named frame on the Home page. Delete any section you do not need; the page is a vertical stack so the rest reflows. Section numbering (①, ②, ③…) is plain text in the eyebrow labels — renumber if you remove one.
5. Add projects
Open the Projects collection. Fields: Title, Slug, Category, Year, Client, Summary, Cover Image, Gallery, Services, Accent, Featured, Project Details and Related Projects. Add a row and it appears on the home gallery, the Work page and its own detail page automatically. The Accent colour drives the chip on the card and the badge on the detail page.
6. Add articles
Open the Articles collection. Fields: Title, Slug, Category, Date, Author, Thumbnail, Excerpt, Content and Related Articles. The Journal index sorts by Date descending. The detail page uses the Previous and Next item variables for pagination.
7. Customise the 3D objects
The Gumdrop Object component ships five material variants: Lime, Bubblegum, Violet, Tangerine and Chrome. Each is a Framer liquid-gradient shader with its own five-colour ramp — select the Liquid Surface layer and edit the Colors array. Speed, scale, jelly and the mouse-push strength are all shader properties. Satellite Color, Label, Show Label, Draggable and Idle Float are exposed as component properties on every instance.
8. Adjust motion intensity
Three levers. Per-layer: every reveal uses an Appear or Text effect you can delete or retime. Per-site: Framer’s Reduced Motion setting (Site Settings → General) respects the visitor’s system preference. Per-component: the Gumdrop Object exposes Draggable and Idle Float booleans, so you can switch the expensive behaviour off on any instance.
9. Connect the contact form
The form on /contact is fully built and validated but deliberately not connected. Select the form frame and set a destination in Framer’s form settings, or replace the submit area with an integration component (Loops, Kit, Mailchimp, FormSpark and HubSpot are all available in Framer’s component library). The submit button already has Sending, Sent, Error and Incomplete states wired.
10. Replace the sample imagery
All photography is Unsplash and is placeholder only. Replace the Cover Image and Gallery fields on each project, the Thumbnail on each article, and the two editorial bands on the Studio page. Nothing else on the site uses photography — the rest is type, shape and shader.
11. What is used
Fonts: Bricolage Grotesque, Space Grotesk, DM Mono (all Google Fonts, SIL Open Font License). Icons: Lucide (ISC) and the Framer Logos set. Shaders: Framer’s built-in WebGL shaders. Photography: Unsplash. Everything else — layouts, the Gumdrop object, stickers, wordmark and copy — is original to this template.
12. What depends on custom code
Nothing. Every interaction in GUMDROP is built from native Framer primitives: component variants, Set Variant and Set Variable actions, Appear and Text effects, drag effects, ticker effects, parallax, and Framer’s shader nodes. There are no code components to maintain and no npm dependencies to break.
13. Mobile fallbacks
The Gumdrop object keeps its shader and drag behaviour on touch devices but shrinks and repositions on the phone breakpoint. The services selector and playground lab wrap from two columns to one. Tickers keep running but remain draggable. The navigation becomes a full-height drawer at 810px and below.
14. Legal obligations
Keep the font licences intact if you redistribute. Replace the sample testimonials and client names before publishing — they are clearly labelled example content and must not be presented as real. Review the Privacy page with your own counsel.
15. Publish and maintain
Set your site metadata and social image under Site Settings, point the contact form at a real destination, replace the sample content, then publish from the Framer toolbar. The CMS is the only thing you will touch regularly.