Skins

One content file.
12 finished looks.

Every card below is the real page, running live at quarter scale, and every page renders the exact same object from src/lib/content.ts. Swap that file for a real project and you have 12 deployable landing pages before you have written a line of CSS. Design DNA for the first six lifted from swipe.neilb.app. The four newest run their own layout engine and their own GSAP motion: a bento grid, a horizontal scroll track, a sticky scrollytelling split, a stack of cards, cinematic full bleed bands, and an editorial masonry wall. The last two are built around photography, self hosted and optimised, never hotlinked.

Astro 5 static No UI framework GSAP motion No external assets MIT license Source on GitHub
Dark SaaS Every client, every deadline, in one place. Client operations, one system. Start free

Linear Dark

App and product launches. The default for anything with a UI.

dark saas · swipe ref linear-dark View →

Clean Corporate Every client, every deadline, in one place. Client operations, one system. Start free

Stripe Corporate

B2B services, client sites, anything that has to look trustworthy.

clean corporate · swipe ref stripe-corporate View →

Editorial Luxury Every client, every deadline, in one place. Client operations, one system. Start free

Aesop Editorial

Personal brand, high ticket, luxury. Calm and expensive.

editorial luxury · swipe ref aesop-editorial View →

Bold Type-Driven Every client, every deadline, in one place. Client operations, one system. Start free

Gumroad Bold

Offers, productized services, anything that should shout.

bold type-driven · swipe ref gumroad-bold-type View →

Long-Form Sales Every client, every deadline, in one place. Client operations, one system. Start free

AG1 Longform

Long-form sales and VSL pages. Quiz entry, proof stack, sticky CTA.

long-form sales · swipe ref ag1-longform View →

Acid Bento Every client, every deadline, in one place. Client operations, one system. Start free

Aurora

Modern SaaS with an edge. Type wall hero, then an asymmetric bento grid.

acid bento · no reference View →

Horizontal Editorial Every client, every deadline, in one place. Client operations, one system. Start free

Studio

Agency, portfolio, creative studio. Features pin and scroll sideways.

horizontal editorial · no reference View →

Diagonal Scrollytelling Every client, every deadline, in one place. Client operations, one system. Start free

Canvas

Product stories told in order. A sticky stage that changes with every step.

diagonal scrollytelling · no reference View →

Slab Stack Every client, every deadline, in one place. Client operations, one system. Start free

Prism

Launch pages with weight. Feature slabs stack, shrink and dim on scroll.

slab stack · no reference View →

Cinematic Bands Every client, every deadline, in one place. Client operations, one system. Start free

Atelier

Photography led. Hospitality, property, studio, anything selling atmosphere.

cinematic bands · no reference View →

Editorial Masonry Every client, every deadline, in one place. Client operations, one system. Start free

Lookbook

Photography led. Portfolio, agency work, fashion, a body of work to show.

editorial masonry · no reference View →

Structure Only Every client, every deadline, in one place. Client operations, one system. Start free

Wireframe

Drop copy in, see the skeleton. Decide the look after the structure works.

structure only · no reference View →

Reusing one on a real project

  1. 01

    Wireframe it first

    Drop the real copy into src/lib/content.ts and open /s/wire/. Greyscale, annotated, no visual opinion. Argue about the structure and the words there, not on a page that already looks finished.

  2. 02

    Pick the skin by job, not by taste

    Product launch takes Linear. Client and B2B work takes Stripe. Personal brand and high ticket takes Aesop. A loud offer takes Gumroad. A full argument before the ask takes Longform. The four animated skins pick the same way: Aurora for modern SaaS, Studio for agency and portfolio work, Canvas when the product has to be explained in order, Prism for a launch with energy. Reach for Atelier or Lookbook when the work is worth photographing. On any skin, press [ and ] to flip through the others.

  3. 03

    Copy two files out

    src/skins/<id>/Page.astro and src/lib/content.ts are the whole skin. Every selector is prefixed, every visual is CSS or inline SVG, so it drops into any Astro project without collisions. Then recolour the custom properties at the top of the style block to the client palette.

Take the code

Skins is open source under the MIT license. Clone it, drop your project's copy into the content file, and keep whichever skin earns it. No build tricks. Astro builds it, GSAP drives the motion on the four animated skins, and that is the whole dependency list.

Star it on GitHub 
git clone https://github.com/neilbusque/skins
cd skins && npm install
npm run dev        # localhost:4321
npm run build      # static site in dist/