Design Atlas
Type
gallery
Verdict
Very useful
Licence
Look only licence, not statednot-statedNot stated (free to browse, no account; weekly newsletter, sponsorship by email); the sections shown belong to the sites they come from
Agent channels
none
Pricing
free
Reviewed

← Atlas · Topics: inspiration, landing-pages, cta, footers

Sections.wtf ​

Type
gallery
Verdict
Very useful
Licence
Look only licence, not statednot-statedNot stated (free to browse, no account; weekly newsletter, sponsorship by email); the sections shown belong to the sites they come from
Agent channels
none
Pricing
free
Reviewed

What it is ​

Sections.wtf is a gallery of individual website sections rather than whole sites: one hero, pricing table or footer at a time, generally shown as a short recording. The grid is organized by block type, and each shot links to its source domain plus other captures from the same site. For example, Catalog's hero links to catalog.works and shows more hero references. The site credits its curator through the Peerlist handle "aaali"; it does not state a full name.

When to open it ​

  • When you're deciding how a single block should look and want to compare examples from different live sites side by side.
  • When the transition, scrolling or entrance behavior matters alongside the still composition; the short clips preserve some motion that a static thumbnail would lose.
  • When you need a block that is less common in landing-page galleries, such as Roadmap, Team, Comparison, Open Graph, Tabs or 404.

Most useful ​

  • The home grid can be filtered by 22 types: Menu, Hero, Features, List, Bento, Pricing, CTA, Testimonial, FAQ, Subscribe, Contact, Roadmap, Team, Footer, 404, Words, Comparison, Statistics, Form, Open Graph, Tabs and Unsorted.
  • Open a shot such as Catalog - Hero or Craft - Hero. The detail page links to the original domain, other captures from that site, and more shots of the same type.
  • Use those neighbors to compare different implementations of one block, then use the source link to open the current site and take a fresh screenshot at desktop or mobile width.
  • A Shuffle button for random browsing and a Submit link for suggestions.

Using it with agents ​

There is no MCP, llms.txt, API or published code channel. The useful route is the visual gallery itself: filter by block type, choose two or three distinct shots, open their detail pages, then follow their source links in the browser. Ask the agent to capture the live pages and compare layout, type scale, image treatment, colour and movement. Use the clips to notice timing or transitions; use the live screenshots to study full-page context and responsive behavior. Translate only the design decisions that fit the project.

Watch out for ​

  • It has no style, industry or colour filters, only section type, so it is best for comparing a block rather than finding a whole-site aesthetic.
  • A clip shows only the captured portion and may not reveal the full layout or how it adapts at other widths; follow the source link before using it as a design reference.
  • Recordings show how a section behaves, not how it's built; there's no markup, spacing data or accessibility notes.
  • The Framer link on the site is an affiliate link.

Reusable ideas ​

  • Filing by section type makes every comparison like for like, which is what you want when you're designing one block.
  • Capturing sections as video keeps the motion that a screenshot drops.
  • "More from this site" on every shot lets you read one brand's full page system section by section.

Supahero, CTA Gallery, Footer Design, Navbar Gallery, 404s, Curated