We got tired of changing hex codes for a living. So we automated ourselves out of the job.

The Old Way (Pain)

Every "small" landing page change went through this obstacle course:

1. Marketing has an idea

2. Designer mocks it up (3 rounds of feedback)

3. Engineer builds it (next sprint, maybe)

4. Marketing: "Can we try a different blue?"

5. Back to step 2

6. Engineer: quietly updates resume

One landing page? Fine. Twenty pages, three languages, influencer-specific variants, each with custom pricing? We were drowning.

The chain was the problem: Marketing -> Designer -> Engineer -> Designer -> Engineer -> Deploy. We needed: Marketing -> Deploy.

The Core Idea

Every landing page is a JSON file.

Not "backed by" JSON. The JSON is the page — every heading, color, image, testimonial, pricing plan, CTA button. At build time, the static site generator reads the JSON and bakes it into pre-rendered HTML. No database. No CMS. No API calls at runtime.

Recipe goes in, cake comes out. Visitor gets the cake instantly.

{
  "hero": {
    "heading": "Build Your App 10x Faster",
    "ctaText": "Get Started Free",
    "colors": { "heading": "#FFFFFF", "ctaBackground": "#6C5CE7" }
  },
  "pricing": {
    "plans": [
      { "name": "Pro", "monthly": 29, "features": ["Unlimited projects", "Priority support"] }
    ]
  },
  "testimonials": {
    "items": [
      { "name": "Sarah Chen", "role": "CTO", "quote": "Saved us 200 engineering hours." }
    ]
  }
}

Change the headline? Edit one string. New testimonial? Add an object. Different pricing for France? Swap the numbers. Done.

Architecture

Four pieces:

1. Visual Editor — Marketing customizes pages. Spits out JSON.

2. Serverless Worker — Uploads images, validates config, triggers the build.

3. GitHub Actions — Commits config to Git, opens a PR, deploys.

4. Global CDN — Serves static HTML from 300+ edge locations.

Marketing clicks a button. A Git commit happens. They don't need to know that.

The Editor

Three panels. That's it.

• Left sidebar: 12 section editors (Hero, Pricing, Testimonials, FAQ, etc.) with fields for text, colors, images, toggles

• Right panel: Live preview of the actual page. Viewport switching — Desktop, Tablet, Mobile

• Top toolbar: Publish, presets, reset

Every field maps to a path in the JSON. Change a color picker, the preview updates instantly. It's all local state — no network calls during editing.

Auto-save to localStorage means marketing can close the browser, come back tomorrow, pick up where they left off. We also built a presets system — save configs as reusable templates. Marketing built a library of these within the first week without us asking.

The Publish Pipeline

Marketing clicks "Publish." Here's what happens in the next 3 minutes:

sequenceDiagram
    participant M as Marketing
    participant W as Worker
    participant G as GitHub Actions
    participant CDN as CDN

    M->>W: Uploads images + config JSON
    W->>G: Triggers build workflow
    G->>G: Creates branch, commits config, opens PR
    G->>CDN: Deploys to staging
    G-->>M: Preview URL ready
    Note over M,CDN: Engineer approves PR (~30 sec)
    G->>CDN: Deploys to production

Image upload: Scans config for images, uploads to object storage with immutable cache headers (cached for a year). Validates file types. No, marketing, you cannot upload a 50MB PSD.

Slug generation: Auto-generates from the heading. Detects collisions, appends -v2, -v3.

CI/CD: Creates a Git branch, writes the JSON config, commits, opens a PR, triggers deploy. All automated.

gitGraph
    commit id: "main"
    branch variant/summer-sale
    commit id: "publish summer-sale"
    checkout main
    branch variant/influencer-alex
    commit id: "publish influencer-alex"
    checkout main
    merge variant/summer-sale
    merge variant/influencer-alex

The zero-load-time trick: The config gets baked into static HTML at build time. When a visitor loads the page, everything is already there — colors, copy, images, pricing. No API calls. No loading spinners. The page is "done" before JavaScript even loads.

Performance

Two-tier loading: Hero, social proof, and testimonials render immediately. Pricing, FAQ, and video lazy-load via IntersectionObserver with 100px look-ahead. By the time you scroll there, it's ready.

Edge delivery: Static HTML on a global CDN. No origin server. Brotli compression. Your page loads fast whether you're in Mumbai or Montreal.

Analytics that don't block paint: PostHog and monitoring load async. Section visibility tracking fires events as sections enter the viewport — marketing gets funnel data without us sacrificing a millisecond.

Variants: Languages, Influencers, Campaigns

This is where it gets fun.

Language variants: Duplicate a preset, translate the copy, adjust pricing. Publish. Fully localized page in minutes, no i18n library needed.

Influencer pages: Custom colors matching their brand, their testimonial front and center, tailored hero copy, unique pricing. They get a custom URL. Their audience gets a page that feels hand-built — because it is.

Safety net: Every variant is a Git commit. Marketing published something broken? git revert. 30 seconds. Try doing that with a CMS.

Idea to Live Page: The Timeline

timeline
    title 20 Minutes, Start to Finish
    0 min : Open editor, load a preset
    3 min : Customize copy, colors, pricing, testimonials
    5 min : Preview on mobile, tweak, hit Publish
    8 min : Staging deploy complete, verify preview
    15 min : Engineer approves PR
    20 min : Live on production, globally

Old flow: 1-2. New flow: 20 minutes. Engineering's involvement: a 30-second PR approval.

What We'd Do Differently

Config bloat: Each variant JSON is ~38KB because it stores everything, including defaults. Storing only overrides would cut this by 80% and make PR diffs actually readable.

Single-player editing: localStorage means one person per browser. Two marketers editing simultaneously = last one wins. Real-time collab would fix this, but hasn't been needed yet.

Preview speed: The "real" preview requires a staging deploy (~3 min). An on-demand render function would make this instant.

TL;DR

• JSON config = entire page. Git = CMS. PR = content approval.

• Static generation means zero API calls at runtime. Pages load instantly.

• Marketing clicks Publish, automation handles the rest. Engineering reviews at their pace.

• Every variant is a Git commit. Rollbacks are a git revert away.

Marketing went from "file a ticket and wait two weeks" to "ship it yourself in 20 minutes." Engineering went from "change hex codes" to "approve PRs over coffee."

Everyone's happier. Especially the engineer.

Building something similar? Hit me up — happy to nerd out about config-driven UIs and making marketing teams dangerously autonomous.

Here is what we will be creating Visit Demo

Without wasting any time , let's get started,
I am using nextjs for this you can choose react or whatever you prefer..

╰─ npx create-next-app@latest park --tailwind

Add these packages in your package.json

 "dependencies": {
    "@react-hook/window-size": "^3.1.1",  // to get the size of window
    "framer-motion": "^11.0.8", // to animate our elements
    "normalize-wheel": "^1.0.1", // to normalize the wheel scroll details
    "react-use": "^17.5.0" // to use useRafLoop to render stuff
  }

don't forget to run npm install to install these packages.

let's clear the boilerplate and add the constants which we will be using in page.jsx

"use client";

const _ = {
  speed: 1,
  threshold: 0.014,
  wheelFactor: 1.25,
  dragFactor: 1.2,
};

const data = [
  {
    image:
      "https://framerusercontent.com/images/VIqlDWL1UV6azfAV9xBz0MPhw.jpeg?scale-down-to=1024",
    title: "Petrified Forest",
  },
  {
    image:
      "https://framerusercontent.com/images/L1RFqeJ6NviUiTVLT3u2pL6IU.jpeg?scale-down-to=1024",
    title: "Mountain Valley",
  },
  {
    image:
      "https://framerusercontent.com/images/Q44lHbttA8VG6mS9allIhkYAR8Y.jpeg?scale-down-to=1024",
    title: "Cannon Beach",
  },
  {
    image:
      "https://framerusercontent.com/images/3LKCYdYAgamssbz1JJSOnu8vM.jpg?scale-down-to=1024",
    title: "Redwood",
  },
  {
    image:
      "https://framerusercontent.com/images/NcLJHjVnMgsxeBqzuinazFIEXoc.jpg?scale-down-to=1024",
    title: "Brookings",
  },
];

const data3 = [
  {
    image:
      "https://framerusercontent.com/images/CzfcVySzXAvy0AuiJGpGMtrpus.jpeg?scale-down-to=512",
    title: "Zion",
  },
  {
    image:
      "https://framerusercontent.com/images/I6xwwDpEjzsZzRHm0K43uSBUTFw.jpeg?scale-down-to=1024",
    title: "Saguro",
  },
  {
    image:
      "https://framerusercontent.com/images/xzKVdjf3wAmhNYnOArbE2UDgm8.jpeg?scale-down-to=1024",
    title: "Josha Tree",
  },
  {
    image:
      "https://framerusercontent.com/images/Q44lHbttA8VG6mS9allIhkYAR8Y.jpeg?scale-down-to=1024",
    title: "Cannon Beach",
  },
  {
    image:
      "https://framerusercontent.com/images/q7JcwecvpKTVhzSu8X3xeEJUmM.jpg?scale-down-to=1024",
    title: "Grand Teton",
  },
];

const data2 = [
  {
    image:
      "https://framerusercontent.com/images/hTsiS6tZ2GARqbwWY5dIUHGtcU.jpeg?scale-down-to=1024",
    title: "Yosemite",
  },
  {
    image:
      "https://framerusercontent.com/images/gLC4I3K6WZDH2d8LImM944p2oVw.jpeg?scale-down-to=1024",
    title: "Catalina",
  },
  {
    image:
      "https://framerusercontent.com/images/fJDYXXbxmLW7qi3QCMfWXJRvPc.jpeg?scale-down-to=1024",
    title: "Great Sand Dunes",
  },
  {
    image:
      "https://framerusercontent.com/images/xzKVdjf3wAmhNYnOArbE2UDgm8.jpeg?scale-down-to=1024",
    title: "Sedona",
  },
  {
    image:
      "https://framerusercontent.com/images/NSExEw4QIpuVtifFprhP3QxjY.jpeg?scale-down-to=1024",
    title: "Morro Bay",
  },
];

const data4 = [
  {
    image: "https://www.touropia.com/gfx/b/2020/09/badlands.jpg",
    title: "Badlands",
  },
  {
    image: "https://www.touropia.com/gfx/b/2020/09/niagara_falls.jpg",
    title: "Niagara Falls",
  },
  {
    image: "https://www.touropia.com/gfx/b/2020/09/big_sur.jpg",
    title: "Big Sur",
  },
  {
    image: "https://www.touropia.com/gfx/b/2020/09/florida_keys.jpg",
    title: "Florida Keys",
  },
  {
    image: "https://www.touropia.com/gfx/b/2020/09/manhattan.jpg",
    title: "Manhattan",
  },
];

export default function Home() {
  return (
    <main className="flex flex-col max-w-screen overflow-x-hidden items-center text-center">
      {/* We will be adding content here  */}
    </main>
  );
}

now what are we going to do is to add some content in our code so it shows up.

<main className="flex flex-col max-w-screen overflow-x-hidden items-center text-center">
      {Array.from({ length: 1 }).map((item, index) => (
        <div
          className="h-screen text-[5rem] text-white font-thin w-full flex items-center justify-center bg-black"
          key={index}
        >
          Insert Beautiful Hero Section Here
        </div>
      ))}
      <div className="flex items-center justify-center flex-col gap-4 mt-[8rem] text-[4rem] max-w-[500px] font-semibold ">
        <span className="text-[64px] text-white font-cavet">
          Featured journeys
        </span>
        <span className="text-[18px] text-[#808080] font-light">
          Each photo unveils part of a journey through America, capturing
          moments from serene beaches at dawn to the vibrant twilight over the
          Pacific.
        </span>
      </div>

      {Array.from({ length: 2 }).map((item, index) => (
        <div
          className="h-screen text-[6rem] text-white font-thin w-full flex items-center justify-center bg-black"
          key={index}
        >
          Another Section
        </div>
      ))}
    </main>

it will look like this

now let's listen to mouse wheel or scroll, so for that i am going to create a ref named x and a function named onWheel , and i am going to use normalizeWheel function which i will be importing from normalizeWheel package to get the value in formatted way and store that value in our x reference after multiplying by wheel factor.

const x = useRef(0);

  const onWheel = (e) => {
    const normalized = normalizeWheel(e);
    x.current = normalized.pixelY * _.wheelFactor;
  };
  return (
    <main
      className="flex flex-col max-w-screen overflow-x-hidden items-center text-center"
      onWheel={onWheel}
    >

now we have our scrolling speed stored in x.current and whenever we scroll, it updates, and it doesn't cause any render cause reference doesn't cause re-renders in react.

now let's create two more components, either in same file or you can create separate file also i will be creating them in same file to have the all code at one place.

const MarqueeContainer = () => {
  return <div className="flex gap-[30px]"></div>;
};

const MarqueeItem = () => {
  return (
    <div className="shrink-0 flex gap-[40px] items-center  text-white  whitespace-nowrap"></div>
  );
};

i have added some basic styling to it, which you can understand by going through the code.

const MarqueeContainer = ({x, direction, springDetails, cardData}) => {
 var initialValue = _.speed;
  if (direction === "right") {
    initialValue *= -1;
  }

  const speed = useSpring(initialValue, springDetails);

  const loop = () => {
    if (Math.abs(x.current) < _.threshold) return; // to preserver a minimum speed

    x.current *= 0.66; // so we gradiuallly decrease the speed to a threshold other wise it will infinitley speed

    if (direction === "right") {
      speed.set((_.speed + x.current) * -1);
    } else {
      speed.set(_.speed + x.current);
    }
  };

  useRafLoop(loop, true);
  return <div className="flex gap-[30px]"></div>;
};

In MarqueeContainer , i have added some props named direction , springDetails and x, we will be using direction to control the direction of animation, springDetails will contain details regarding the springAnimations which we will pass during initialization of MarqueeContainer , x will contain our reference to speed and cardData is just data for rendering the card component which we will create later on.

in first few lines, i am checking the direction, and if it is in right, then i am multiplying it with -1 to make it in opposite direction.

const speed = useSpring(initialValue, springDetails );

in this line , i am using useSpring hook from framer-motion , to create a speed motion values which we will be using to control the speed of our MarqueeItem. you can read more about useSpring hook here.
Here is how MarqueeContainer intilization will look like at the moment.

<MarqueeContainer
    x={x}
    direction={"left"}
    springDetails={{ damping: 200, stiffness: 1000, mass: 1 }}
    cardData={data}
 />

damping is the opposing force, and stiffness is how quickly we want our changes to show. mass is just mass we define for our elements, which will be used in their internal calculations to control the animations.

const loop = () => {
    if (Math.abs(x.current) < _.threshold) return; // to preserver a minimum speed

    x.current *= 0.66; // so we gradiuallly decrease the speed to a threshold other wise it will infinitley speed

    if (direction === "right") {
      speed.set((_.speed + x.current) * -1);
    } else {
      speed.set(_.speed + x.current);
    }
  };

in the loop function, firstly i am checking the current speed , if it is less than threshold then i am not doing anything and returing it.
if it is greater than our threshold then i am mutiplying it 0.66 and storing it , so it doesn't just keep increasing.
now i setting the speed to x.current + our initial speed , and if direction is right so multiplying it by -1, so we get a reverse animation.

useRafLoop(loop, true);

in last line i am just calling this loop again and again so it keeps updating the value. i am using useRafLoop hook from react-use.

now let's create our MarqueeItem and pass down the speed which we have been storing in speed variable.

const MarqueeItem = ({ children, speed }) => {
  const item = useRef(null);
  const rect = useRef({});
  const x = useRef(0);

  const [width, height] = useWindowSize();

  const setX = () => {
    if (!item.current || !rect.current) return;

    var xPercentage = (x.current / rect.current.width) * 100;
    if (xPercentage < -100) x.current = 0;
    if (xPercentage > 0) x.current = -rect.current.width;

    item.current.style.transform = `translate3d(${xPercentage}%, 0, 0)`;
  };

  useEffect(() => {
    rect.current = item.current.getBoundingClientRect();
  }, [width, height]);

  const loop = (e) => {
    x.current -= speed.get();
    setX();
  };

  useRafLoop(loop, true);

  return (
    <div
      className="item shrink-0 flex gap-[40px] items-center  text-white  whitespace-nowrap"
      ref={item}
    >
      {children}
    </div>
  );
};

now in first few lines, i have initialized some variables using useRef hook, so it doesn't cause re-render when we update our variables.

const item = useRef(null);
const rect = useRef({});
const x = useRef(0);
const [width, height] = useWindowSize();

here, item will be used as a reference to our MarqueeItemdiv, i am using rect to store the width and height of our item div, here i am defined another x variable in which we will be storing current location of MarqueeItem.
we have declared two more variable named width and height, from useWindowSize hook, which i have imported from @react-hook/window-size .

const setX = () => {
    if (!item.current || !rect.current) return;

    var xPercentage = (x.current / rect.current.width) * 100;
    if (xPercentage < -100) x.current = 0;
    if (xPercentage > 0) x.current = -rect.current.width;

    item.current.style.transform = `translate3d(${xPercentage}%, 0, 0)`;
  };

In the setX function , firstly i am checking if our item ref has any element or not.
and in xPercentage variable, i am storing how much we will need to shift our Marquee item in x direction. you can play around with formula which you like, but what i am doing here to calculate is, getting the current location by x.current , diving it by the width of our container and multiplying it by 100,

if (xPercentage < -100) x.current = 0; , if the calculated xPercetage is less than -100 , then it has moved out of the screen to the left so update the current location to 0 by doing x.current = 0.

if (xPercentage > 0) x.current = -rect.current.width; , If the calculated xPercentage is greater than 0 , the item has scrolled out of view to the right, x.current is updated to the negative value of the item's width, so it wraps around to the left side.

now we are just updating the MarqueeItem using style transform, we are using translate3d for better performance, as it leverage GPU acceleration.

useEffect(() => {
    rect.current = item.current.getBoundingClientRect();
  }, [width, height]);

I have just added a useEffect with dependencies of width and height so whenever screen width, height changes we update the rect.current also.

 const loop = (e) => {
    x.current -= speed.get();
    setX();
  };
  useRafLoop(loop, true);

in loop function , I am subtracting the speed value from x.current, this will update the MarqueeItem container position based on speed. and after updating the x.current we are calling setX function so it reflects the changes. and we are calling it continuously using useRafLoop hook.

now let's create a card component which will have the image and text,

const Card = ({ item }) => {
  return (
    <div className="flex pointer-events-none   shrink-0 justify-center items-center gap-[30px]">
      <div className="max-h-[104px] rounded-xl relative max-w-[104px] overflow-clip ">
        <img
          alt={item.title}
          src={item.image}
          className="  h-full w-full min-h-[104px] min-w-[104px] object-cover object-center"
        />
      </div>
      <span className="text-[3rem] font-medium w-full whitespace-nowrap">
        {item.title}
      </span>
    </div>
  );
};

let's go over it again,

add this to render our MarqueeContainer in our Page

<div className="mt-[10rem]">
        <MarqueeContainr
          x={x}
          direction={"left"}
          springDetails={{ damping: 200, stiffness: 1000, mass: 1 }}
          cardData={data}
        />
</div>

now in our MarqueeContainer , add this , this will render the components four time to dont leave any gap. i have also made this motion.div element , i have imported motion from framer-motion , this is just how framer motion work, whatever element which we want to animate we can just make it a motion element.

 <motion.div
        className="flex gap-[30px]"
      >
        <MarqueeItem speed={speed}>
          {cardData.map((item, index) => (
            <Card key={index} item={item} />
          ))}
        </MarqueeItem>
        <MarqueeItem speed={speed}>
          {cardData.map((item, index) => (
            <Card key={index} item={item} />
          ))}
        </MarqueeItem>
        <MarqueeItem speed={speed}>
          {cardData.map((item, index) => (
            <Card key={index} item={item} />
          ))}
        </MarqueeItem>{" "}
        <MarqueeItem speed={speed}>
          {cardData.map((item, index) => (
            <Card key={index} item={item} />
          ))}
        </MarqueeItem>
</motion.div>

currently it will look like this ,

to add more rows, we can just multiple MarqueeContainer , but keep in mind, you need to create a new variable using useRef , which will store the speed of that MarqueeContainer in that , if you will pass the current x , then every instance will have the same speed,

here is how to add multiple rows,

const x = useRef(0);
  const x2 = useRef(0);
  const x3 = useRef(0);
  const x4 = useRef(0);

  const onWheel = (e) => {
    const normalized = normalizeWheel(e);
    x.current = normalized.pixelY * _.wheelFactor;
    x2.current = normalized.pixelY * _.wheelFactor;
    x3.current = normalized.pixelY * _.wheelFactor;
    x4.current = normalized.pixelY * _.wheelFactor;
  };

 <div className="mt-[10rem] flex flex-col gap-[30px]">
        <MarqueeContainer
          x={x}
          direction={"left"}
          springDetails={{ damping: 200, stiffness: 1000, mass: 1 }}
          cardData={data}
        />
        <MarqueeContainer
          x={x2}
          direction={"right"}
          springDetails={{ damping: 200, stiffness: 1000, mass: 1 }}
          cardData={data2}
        />
        <MarqueeContainer
          x={x3}
          direction={"left"}
          springDetails={{ damping: 200, stiffness: 1000, mass: 1 }}
          cardData={data3}
        />
        <MarqueeContainer
          x={x4}
          direction={"right"}
          springDetails={{ damping: 200, stiffness: 1000, mass: 1 }}
          cardData={data4}
        />
      </div>

you can play around with damping and stiffness and mass of each MarqueeContainer instance so every row will have some other effects.

I have added some more effects like dragging and moving , slowdown , and a lot more , so you can checkout the github repo if you are interested in adding some more effects.
Here is the Github Repo :- notpritam/park (github.com)
If you have any questions feel free to comment...