shop-section-library

A rich catalog of website SECTION TYPES (hero, bento, feature-tabs, timeline, pinned scrollytelling, horizontal case-study scroll, draggable carousel, before/after slider, stats counter, pricing, comparison table, FAQ, gallery, video showcase, marquee, CTA, footer, …) plus a motion-effect palette (entrance/hover/scroll/text/background/SVG/cursor), so a build draws from a WIDE section vocabulary instead of the same hero→3-cards→CTA. Read on any from-scratch visual build/redesign to pick 10–15 section types that FIT the vertical + chosen style, including 2–3 signature "wow" sections. Sits ON TOP of shop-core-rules (contract) + shop-design-taste (taste).

A professional page is 10–15 distinct section types, including 2–3 signature "wow" sections, chosen to fit the business vertical AND the design style. Pulling from the same hero → 3 equal cards → CTA every time is the #1 "thin / made-by-AI" failure. Pick a COHERENT set from the catalog below — variety that suits the brand, never a random dump. Everything still obeys the platform contract: copy in {% schema %} settings (§F), colors/fonts via tokens (§G — var(--accent), bg-accent, font-display), data bound to real records (§H), motion via the theme's data-anim convention or a small inline GSAP <script> per section.

Section catalog (pick 10–15 that fit)

Hero (video-bg / split / bento / clipped-headline / poster) · Logo cloud · Logo/press MARQUEE · Stats counter · Feature grid · Feature SHOWCASE (sticky image) · BENTO grid · Feature TABS (crossfade) · Alternating zig-zag rows · Pricing (monthly/yearly toggle) · Comparison table (✓/—, sticky header) · FAQ accordion · Timeline / process (connector draw) · Team (flip cards) · Testimonials (draggable carousel / wall) · Gallery (masonry / lightbox / ken-burns) · Video showcase / ambience band · Metrics (odometer/sparkline) · Case studies (HORIZONTAL scroll / sticky cards) · Blog/news list · Integrations (orbit icons + SVG lines) · Dashboard/app mockup (perspective) · Code block (typing) · Roadmap / changelog · Values · Mission/Vision (illustration parallax) · Awards / certificates · Maps / locations · Events / countdown (flip numbers) · Speaker/podcast grid · Press kit / media mentions · Booking form (calendar) · Newsletter (glow input) · Contact (floating labels) · CTA banner (particles/pulse) · Rich footer (columns, back-to-top) · 404 (playful). ⚠️ CONTENT-ONLY platform — no ecommerce/app-account sections (cart, checkout, product grid, billing, login): skip them; for order-like flows use the WebPick pattern (core rules).

Signature "wow" sections (include ≥2–3 that FIT the style)

• Fullscreen scrollytelling — pin a panel, advance steps/mask-reveal on scroll (craft story, product walkthrough). Great for luxury/editorial/brand.
• Horizontal scroll showcase — pin the section, translate a track sideways on scroll (collection, case studies, portfolio, spec cards). Great for portfolio/agency/tech.
• Draggable carousel — pointer-drag rail + dots (lookbook, testimonials, products, offers). Fits fashion/food/deal/beauty.
• ⚠️ Any horizontal-scroll list needs ENOUGH items to overflow — the track only scrolls (drag/swipe/arrows do anything) when it holds MORE cards than fit across the viewport. Author ~2× the visible count (≈3 show on desktop → 6-8 real cards; a logo/testimonial strip → 8-12). Too few = the row fits, never overflows, dead carousel. Pad only with REAL items (or rotated real photos), never blank filler.
• Before/after slider — drag a divider between two images (beauty, renovation, results).
• Video showcase / ambience band — looping muted video behind a statement (cinematic brands: hospitality, real-estate, fashion, food, agency reel).
• Bento hero / bento feature grid — mixed-span tiles, one oversized metric tile (SaaS/tech).
• Animated dashboard / app mockup — framed product UI in a browser/phone/laptop chrome.
• Sticky 3D card-stack — cards stack + pin as you scroll (roadmap, steps).

Motion palette (implement with GSAP / data-anim; match intensity to the brand)

• Entrance: fade-up/left/right · zoom · scale · rotate · flip · blur-in · clip/mask reveal.
• Hover: lift · 3D tilt · glow · shadow-grow · border-draw · underline-sweep · magnetic · shine · image-zoom · icon-spin/bounce.
• Scroll: sticky · pin · parallax (layered depth) · horizontal scroll · scroll-progress bar · mask/clip wipe · card-stack · infinite marquee.
• Text: typewriter · split-chars/words/lines stagger · gradient-shift · wave · scramble/decrypt · letter drop/flip · count-up · ticker.
• Background: aurora · mesh/animated gradient · noise · particles · floating blobs · animated grid · light rays · orbit dots.
• SVG: path-draw · stroke-dash · morph · line-connect · icon-trace.
• Cursor (desktop, optional): spotlight · trail · magnetic · follower dot/ring.
• Media: ken-burns · image pan/tilt · video autoplay/scrub · perspective zoom · lightbox.

Fit-by-vertical (starting picks — adapt)

• SaaS / tech → bento hero · logo marquee · feature tabs · dashboard mockup · integrations orbit · stats · pricing toggle · comparison · code block · FAQ · CTA.
• Agency / portfolio → hero · horizontal case-study scroll · work gallery (masonry) · process · stats · testimonials carousel · awards · CTA.
• Restaurant / hospitality → video hero · menu/gallery (ken-burns) · story scrollytelling · booking form · testimonials · locations/map · events · CTA.
• Real estate → video hero · listing carousel · stats · gallery · floorplan/feature-showcase · locations/map · booking · FAQ.
• Fashion / beauty → editorial/video hero · lookbook draggable carousel · before/after · gallery · story · testimonials · newsletter.
• Corporate / services → hero · clients marquee · stats/metrics · services · team · case studies · awards · careers · locations · FAQ · contact.
• Editorial / blog → masthead hero · article grid · pull-quote · timeline · gallery · newsletter.

RESTRAINT is a style too: for quiet/luxury/japandi/scandi, FEWER motions + huge whitespace + big imagery still makes a rich 10+ section page — calm is the point, don't cram pins/sliders into a serene brand.