Zum Inhalt
Fundament

Katalog · 127 Sections

25 Kategorien. Jede Zeile ist ein Pfad, den eine Seite incontent/pages/<slug>.json unter sections[].pfad setzen kann.

buttons (8)

  • buttons/button-corealle · standard · freedesignmdReact button component with 5 variants, 3 sizes, icon slots, a loading to success morph and a springy press.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • buttons/hold-to-confirmalle · standard · freedesignmdHold to confirm button for destructive actions: progress fills while you press, early release cancels, Space works too.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • buttons/icon-button-groupalle · standard · freedesignmdAccessible icon button toolbar with toggles, tooltips, shortcuts and roving focus, for editors and tools.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • buttons/magnetic-buttonalle · standard · freedesignmdMagnetic button for React that leans toward your cursor on a spring, with the label drifting further than the shell.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • buttons/pill-tag-buttonalle · standard · freedesignmdFilter chips for React: selectable pill tags with count badges and a check that slides in on a spring.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • buttons/segmented-controlalle · standard · freedesignmdReact segmented control with a sliding thumb on a spring, badges and arrow-key selection. A radio-group toggle.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • buttons/shimmer-buttonalle · standard · freedesignmdShimmer button for React: a dark capsule with a travelling light sweep and rotating border glow, built for one main CTA.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • buttons/split-buttonalle · standard · freedesignmdReact split button: a primary action fused to a dropdown menu, with keyboard navigation, type-ahead and auto-flip.Slots: ueberschrift(h2,72) · vorspann(p,240)

contact (1)

  • contact/kontaktwegedo · standard · eigenVier Wege zum Betrieb auf einmal: Anrufen, WhatsApp, Termin, E-Mail. Der Ausgang jedes Lead-Magnets.Slots: ueberschrift(h2,60) · vorspann(p,220) · knopf_anrufen(button,28) · knopf_whatsapp(button,28) · knopf_termin(button,28) · knopf_email(button,28) · hinweis(klein,140)

cta (1)

  • cta/cta-abschlussdo · standard · eigenDer letzte Zug der Seite: eine Handlung, ein Beleg daneben.Slots: lead_in(klein,90) · ueberschrift(h2,72) · text(p,240) · knopf(button,28) · lead_out(klein,110)

cursors (4)

  • cursors/custom-cursoralle · nicht_standard · freedesignmdCustom cursor for React: a dot and a spring-lagged ring that morph into labels like View, Drag or Play and snap to buttons.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • cursors/fisheye-gridalle · nicht_standard · freedesignmdFisheye grid: an infinite two-axis tile wall you drag with momentum, with a lens that swells tiles around the cursor.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • cursors/image-trailalle · nicht_standard · freedesignmdImage trail cursor effect: cards spawn along the cursor path, pop in with a tilt and fall away. A gallery you move through.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • cursors/magnetic-dockalle · nicht_standard · freedesignmdmacOS-style dock for React: icons swell with a gaussian falloff, labels float up, launches bounce and running apps get a dot.Slots: ueberschrift(h2,72) · vorspann(p,240)

dither (4)

  • dither/dither-gradientsee · nicht_standard · freedesignmdDithered mesh gradient background: a slow flowing gradient through Bayer dithering, with a cursor-following light pool.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • dither/dither-imagesee · nicht_standard · freedesignmdDither shader for images: Bayer and blue-noise dithering to 2 to 4 inks, with a cursor loupe that sharpens, inverts or reveals.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • dither/dither-logosee · nicht_standard · freedesignmdDither logo effect in React: your mark as ordered-dither stipple dots that scatter from the cursor and spring back.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • dither/dither-textsee · nicht_standard · freedesignmdDither text effect: headlines printed as a Bayer halftone that inks in as you scroll into view and dissolves as it leaves.Slots: ueberschrift(h2,72) · vorspann(p,240)

faq (1)

  • faq/faq-grundthink · standard · eigenDie Fragen, die vor dem Anruf im Weg stehen, direkt auf der Seite beantworten.Slots: ueberschrift(h2,60) · vorspann(p,220)

feature-sections (7)

  • feature-sections/autoplay-feature-tabsthink · standard · freedesignmdAutoplay feature tabs for React: tabs advance on a filling progress bar, pause on hover, and show a phone screen built in code.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • feature-sections/before-after-comparethink · standard · freedesignmdBefore and after image slider in React: drag to compare AI product-photo retouching, with chips that choose the edits.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • feature-sections/bento-live-uithink · standard · freedesignmdBento grid features section for React where every tile works: freeze a card, convert FX, clear approvals, scrub a chart.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • feature-sections/hover-index-listthink · standard · freedesignmdEditorial index list for an architecture studio: a photo trails the cursor on a spring and rows open in place.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • feature-sections/process-timelinethink · standard · freedesignmdShipment tracking timeline for React: stages on an SVG route, a marker that sails to the live position, expandable logs.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • feature-sections/spec-sheetthink · standard · freedesignmdProduct spec sheet section for an e-bike: big model number, mono spec grid and an SVG drawing with lit-up callouts.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • feature-sections/sticky-feature-tourthink · standard · freedesignmdScroll-driven feature tour with a pinned window that crossfades terminal, diff and query UIs, steps on a progress rail.Slots: ueberschrift(h2,72) · vorspann(p,240)

footers (6)

  • footers/curtain-reveal-footeralle · standard · freedesignmdCurtain reveal footer fixed beneath the page and uncovered as content lifts away, with tables, hours, address and a Book call.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • footers/dev-footer-statusalle · standard · freedesignmdDeveloper footer with a live status pill and per-region uptime bars, sitemap, validated newsletter and language select.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • footers/giant-wordmark-footeralle · standard · freedesignmdFooter with a giant wordmark: dark agency footer with sitemap and contacts, closed by a wordmark that rises letter by letter.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • footers/minimal-signoff-footeralle · standard · freedesignmdMinimal portfolio footer: name, copy-to-clipboard email with toast, local studio time and a back-to-top progress ring.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • footers/office-clocks-footeralle · standard · freedesignmdFooter with live office clocks: analog dials show local time and open or closed state, plus a UTC ruler and newsletter.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • footers/retail-footeralle · standard · freedesignmdE-commerce footer with service promises that re-price per country, a currency picker, payment badges and phone accordions.Slots: ueberschrift(h2,72) · vorspann(p,240)

forms (8)

  • forms/input-fielddo · standard · freedesignmdReact input field with floating label, helper, error and success states, adornments, counter, clear and password reveal.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • forms/magnetthink · standard · eigenDer Lead-Magnet: Fragen, Fortschritt, Ergebnis, Kontaktwege. Fuenf Typen, EIN Script.Slots: ueberschrift(h2,72) · vorspann(p,240) · start_knopf(button,28) · kontakt_frage(klein,110) · kontakt_knopf(button,28)
  • forms/multi-step-signupdo · standard · freedesignmdMulti-step signup form for React: a three-step onboarding wizard with progress, validation, transitions and a review step.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • forms/newsletter-inlinedo · standard · freedesignmdNewsletter signup form in one line: inline email validation, a loading button and a success morph with undo.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • forms/otp-inputdo · standard · freedesignmdOTP input for React: six-digit code entry with auto-advance, paste, SMS autofill, error shake and a success cascade.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • forms/payment-formdo · standard · freedesignmdCredit card payment form with brand detection, live formatting, Luhn validation and a preview that flips to the CVC.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • forms/search-commanddo · standard · freedesignmdCommand palette for React: ⌘K search with fuzzy matching, sections, recent items and full keyboard navigation.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • forms/settings-formdo · standard · freedesignmdSettings form for React with switches, a bubble slider, radio cards, a select and a save bar that slides in when dirty.Slots: ueberschrift(h2,72) · vorspann(p,240)

gallery (1)

  • gallery/galerie-asymsee · standard · eigenArbeiten oder Bestand in wechselnden Groessen — asymmetrisch, nicht als gleichfoermiges Raster (R-64).Slots: ueberschrift(h2,60) · vorspann(p,220)

heroes (16)

  • heroes/hero-ai-terminalsee · standard · freedesignmdAI hero section with a terminal that types a prompt and streams an agent's plan while a dashboard assembles beside it.Slots: ueberschrift(h1,72) · vorspann(p,240)
  • heroes/hero-auto-scrubsee · standard · freedesignmdScrollytelling hero section: a 300vh sticky scene where an EV drives through a tunnel of light as specs count up.Slots: ueberschrift(h1,72) · vorspann(p,240)
  • heroes/hero-climate-datasee · standard · freedesignmdData hero section with a dotted canvas globe, pulsing energy arcs and live MW and tCO₂ counters.Slots: ueberschrift(h1,72) · vorspann(p,240)
  • heroes/hero-data-tickersee · standard · freedesignmdData hero section built on live numbers: a rolling headline figure, a scrubbable 24 h SVG chart and a market ticker band.Slots: ueberschrift(h1,72) · vorspann(p,240)
  • heroes/hero-fashion-editorialsee · standard · freedesignmdEditorial fashion hero section: a giant serif masthead over three campaign photos, revealed by clip-path wipes.Slots: ueberschrift(h1,72) · vorspann(p,240)
  • heroes/hero-fintech-cardsee · standard · freedesignmdFintech hero section with a CSS 3D metal card that tilts to the cursor, then flips and docks on scroll as stats count up.Slots: ueberschrift(h1,72) · vorspann(p,240)
  • heroes/hero-fullbleed-photosee · standard · freedesignmdMagazine cover hero with a full-bleed photo that develops from an overexposed print and a masthead that sets letter by letter.Slots: ueberschrift(h1,72) · vorspann(p,240)
  • heroes/hero-health-calmsee · standard · freedesignmdHealthcare hero section: a breathing gradient orb, an appointment stack that fans out and quiet trust stats.Slots: ueberschrift(h1,72) · vorspann(p,240)
  • heroes/hero-music-waveformsee · standard · freedesignmdMusic hero section for an album launch: giant condensed type, a generative sleeve, sliding vinyl and a reactive spectrum.Slots: ueberschrift(h1,72) · vorspann(p,240)
  • heroes/hero-probesee · standard · kunde:probeHero mit Bewertungszeile direkt unter der Ueberschrift — fuer die Rueckflussprobe gebaut.Slots: ueberschrift(h1,72) · vorspann(p,240) · knopf(button,28)
  • heroes/hero-product-stagesee · standard · freedesignmdProduct hero section: a perfume on a dark stage under a pointer-driven spotlight, with an edition picker that swaps the bottle.Slots: ueberschrift(h1,72) · vorspann(p,240)
  • heroes/hero-realestate-splitsee · standard · freedesignmdReal estate hero section: a split layout with a topographic SVG map, price pins and a drag carousel of villas.Slots: ueberschrift(h1,72) · vorspann(p,240)
  • heroes/hero-saas-bentosee · standard · freedesignmdSaaS hero section with a live bento grid where every tile runs a micro-interaction, plus a pointer spotlight.Slots: ueberschrift(h1,72) · vorspann(p,240)
  • heroes/hero-split-screensee · standard · freedesignmdSplit screen hero section: two colour fields that spring open on hover or tap, each with its own type, product and CTA.Slots: ueberschrift(h1,72) · vorspann(p,240)
  • heroes/hero-travel-parallaxsee · standard · freedesignmdTravel hero section for a Kyoto ryokan: a garden photo behind sliding shoji screens, washi copy column and a booking bar.Slots: ueberschrift(h1,72) · vorspann(p,240)
  • heroes/hero-type-onlysee · standard · freedesignmdTypography hero section with no images: a giant specimen word whose letters swell in weight under the pointer.Slots: ueberschrift(h1,72) · vorspann(p,240)

liquid-glass (9)

  • liquid-glass/glass-buttonalle · nicht_standard · freedesignmdLiquid Glass button for React: glass, prominent, clear and clear-prominent capsules in four sizes, with a springy press.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • liquid-glass/glass-media-controlsalle · nicht_standard · freedesignmdLiquid Glass media controls over video: transport, scrubber and volume capsules, with the HIG 35% dimming layer.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • liquid-glass/glass-menualle · nicht_standard · freedesignmdLiquid Glass menu: a glass button that morphs into its dropdown menu and back on a spring, with full keyboard support.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • liquid-glass/glass-sheetalle · nicht_standard · freedesignmdLiquid Glass bottom sheet with detents: content peeks around it, and it turns edge-to-edge and more opaque at full height.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • liquid-glass/glass-slideralle · nicht_standard · freedesignmdLiquid Glass slider: the thumb becomes refracting glass while dragged, stretches with velocity and springs back to solid.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • liquid-glass/glass-tab-baralle · nicht_standard · freedesignmdiOS 26 style Liquid Glass tab bar: a lens springs between tabs, search sits apart, and the bar minimizes as you scroll.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • liquid-glass/glass-togglealle · nicht_standard · freedesignmdLiquid Glass toggle switch in the iOS 26 style: the knob swells into clear glass while pressed or dragged, then settles.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • liquid-glass/glass-toolbaralle · nicht_standard · freedesignmdLiquid Glass toolbar for React: grouped controls with a sliding selection lens, labelled icons and a soft scroll-edge blur.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • liquid-glass/liquid-glassalle · nicht_standard · freedesignmdLiquid Glass for React: a lens that refracts what is behind it, with squircle bevel, specular rim, dispersion and spring physics.Slots: ueberschrift(h2,72) · vorspann(p,240)

liquid-metal (4)

  • liquid-metal/liquid-metal-blobsee · nicht_standard · freedesignmdLiquid metal blob: a raymarched drop of mercury that morphs, merges and reaches for your cursor, on a transparent canvas.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • liquid-metal/liquid-metal-buttonsee · nicht_standard · freedesignmdLiquid metal button: a capsule CTA with a live WebGL chrome rim that ripples from your touch, plus a zero-JS CSS variant.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • liquid-metal/liquid-metal-textsee · nicht_standard · freedesignmdLiquid metal text: a giant headline cast in flowing chrome with bevelled edges, lit by studio lights that follow the pointer.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • liquid-metal/liquid-metalsee · nicht_standard · freedesignmdLiquid metal shader for React: flowing chrome in silver, gold, titanium, black chrome or oil-slick, as a WebGL background.Slots: ueberschrift(h2,72) · vorspann(p,240)

logos (1)

  • logos/logo-leistesee · standard · eigenMarken, Hersteller oder Partner als eine Leiste — Beleg ohne Behauptung.Slots: ueberschrift(klein,72)

micro-interactions (9)

  • micro-interactions/card-stackalle · standard · freedesignmdCard stack for React: photo cards you throw to the back with a drag or a flick, tap to pull one forward. No dependencies.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • micro-interactions/fan-outalle · standard · freedesignmdFan out card spread for React: a pile of photos opens into an arc and gathers back, with staggered motion and hover lift.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • micro-interactions/photo-accordionalle · standard · freedesignmdImage accordion for React: narrow photo strips where the hovered or tapped one grows and the rest make room. Keyboard ready.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • micro-interactions/photo-dockalle · standard · freedesignmdPhoto dock for React: thumbnails swell around the pointer with a smooth falloff, labels float up, clicks hop. Keyboard friendly.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • micro-interactions/photo-lensalle · standard · freedesignmdImage magnifier for React: a round lens follows the pointer or your finger and shows the photo enlarged. No canvas, no dependency.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • micro-interactions/photo-sleevesalle · standard · freedesignmdPhoto album sleeves for React: pictures peek out, lift on hover and fan open on click. Frosted pocket, zero dependencies.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • micro-interactions/pull-buttonalle · standard · freedesignmdMagnetic pull button for React: leans toward your cursor, the label moves further, then springs back. A tiny rAF spring, no library.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • micro-interactions/sliding-tabsalle · standard · freedesignmdSliding tabs for React: an underline that stretches to the next tab, leading edge first. Accessible tablist with arrow keys.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • micro-interactions/tilt-cardalle · standard · freedesignmd3D tilt card for React: leans toward the pointer with a soft sheen and a drifting photo. Lightweight, no animation library.Slots: ueberschrift(h2,72) · vorspann(p,240)

navbars (8)

  • navbars/app-sidebar-navalle · standard · freedesignmdApp sidebar navigation for React: workspace switcher, nested groups, badges, a sliding active marker and a collapsible icon rail.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • navbars/booking-navalle · standard · freedesignmdHotel booking navbar over a full-bleed photo: dismissible announcement, hide on scroll down and a Dates, Guests, Reserve pill.Slots: ueberschrift(h2,72) · vorspann(p,240) · d_src(klein,40) · d_roomSrc(klein,32)
  • navbars/command-navalle · standard · freedesignmdNavbar with command palette: search opens a real ⌘K palette with recents, grouped fuzzy results and a live preview.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • navbars/floating-capsule-navalle · standard · freedesignmdSticky navbar that springs from a full-width bar into a floating capsule on scroll, with a live status light and version chip.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • navbars/fullscreen-menu-navalle · standard · freedesignmdFullscreen menu navbar: a burger opens an overlay with giant links that reveal line by line and a project photo on hover.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • navbars/island-navalle · standard · freedesignmdDynamic island navbar: a dark pill that spring-morphs between links, a now-playing mini player, search and a phone menu.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • navbars/masthead-navalle · standard · freedesignmdNewspaper masthead navbar: mono dateline, huge serif wordmark and a section rail that hands off to a slim bar on scroll.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • navbars/mega-menu-navalle · standard · freedesignmdMega menu navbar for a luxury retail site: the panel glides between menus, with link columns, image cards and a sliding underline.Slots: ueberschrift(h2,72) · vorspann(p,240)

pricing (7)

  • pricing/membership-carddo · standard · freedesignmdSingle plan pricing as a membership card: spring 3D tilt, flips over, with honest included and excluded lists.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • pricing/menu-pricingdo · standard · freedesignmdPricing section styled as a printed menu for a coffee subscription: dotted leaders, size columns and a pen-circled pick.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • pricing/pricing-plan-carouseldo · standard · freedesignmdPricing plan carousel for mobile: snap-scrolling fitness plans that become a row on desktop, with a trial timeline.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • pricing/pricing-tiers-toggledo · standard · freedesignmdReact pricing section with three plans, a monthly and yearly toggle, odometer prices and a set-apart recommended plan.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • pricing/receipt-pricingdo · standard · freedesignmdPricing section as till receipts for studio retainers: pick one and the itemised order, VAT and barcode feed out line by line.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • pricing/seat-stepper-pricingdo · standard · freedesignmdPer-seat pricing stepper with hold-to-accelerate, a volume-discount scale, next price break flag and a sales handoff past 250.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • pricing/usage-calculatordo · standard · freedesignmdUsage-based pricing calculator: snapping sliders price every plan at once, flag the cheapest and animate an itemised bill.Slots: ueberschrift(h2,72) · vorspann(p,240)

process (1)

  • process/prozess-schrittethink · standard · eigenDer Ablauf in drei bis fuenf Schritten, jeder mit Zahl UND Icon (Analyse-Regel: kein Schritt ohne Icon oder Zahl).Slots: ueberschrift(h2,60) · vorspann(p,220)

reviews (1)

  • reviews/rezensions-kastenalle · keiner · eigenBelegte Bewertung als Vertrauenszeile: Sterne, Zahl, Quelle — auf Section-Ebene, nie in einer Rasterkachel (R-59).Slots: ueberschrift(h2,48) · zitat(p,240) · stimme(klein,48)

scroll-hover-effects (10)

  • scroll-hover-effects/count-up-statsalle · standard · freedesignmdCount-up stats section: numbers roll up like an odometer on entering view, with sparklines that draw on in sync.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • scroll-hover-effects/horizontal-pin-galleryalle · standard · freedesignmdHorizontal scroll gallery in React: vertical scroll drives a pinned track of project cards, with parallax and a counter.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • scroll-hover-effects/hover-transitionsalle · standard · freedesignmdEight hover effects for React profile cards: morph blob, diagonal wipe, pixel dissolve, iris, slices, focus and a liquid lens.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • scroll-hover-effects/image-ripplealle · standard · freedesignmdImage ripple effect with WebGL: your cursor drags a live water simulation that refracts the photo with a chromatic edge.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • scroll-hover-effects/magnetic-cursor-gridalle · standard · freedesignmdMagnetic cursor grid: portfolio tiles that tilt and lift toward a spring cursor that morphs from dot to ring to label.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • scroll-hover-effects/marquee-velocityalle · standard · freedesignmdVelocity marquee for React: infinite text tickers that speed up, skew and reverse with scroll velocity.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • scroll-hover-effects/scroll-split-cardalle · standard · freedesignmdScroll animation card in React: a pinned card splits into three panels that fan out in 3D and flip to reveal services.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • scroll-hover-effects/sticky-storytellingalle · standard · freedesignmdScrollytelling section for React: pinned media morphs between four states while text steps scroll past a progress rail.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • scroll-hover-effects/text-reveal-scrollalle · standard · freedesignmdScroll text reveal: a manifesto whose words light up as you scroll, with hand-drawn marker underlines on key words.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • scroll-hover-effects/zoom-parallaxalle · standard · freedesignmdZoom parallax scroll effect: a full-bleed hero shrinks into a seven-tile mosaic as surrounding tiles drift into place.Slots: ueberschrift(h2,72) · vorspann(p,240)

stats (1)

  • stats/zahlen-reihesee · standard · eigenDrei bis vier Kennzahlen gross. Jede Zahl mit Einheit und Quelle (R-60).Slots: ueberschrift(h2,60) · quelle(klein,120)

tables (5)

  • tables/data-tablethink · standard · freedesignmdReact data table with sorting, selection, pagination, sticky header, bulk actions, empty and loading states.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • tables/expandable-tablethink · standard · freedesignmdExpandable table rows that open into detail panels with a smooth height animation, shown with a shipment timeline.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • tables/leaderboard-tablethink · standard · freedesignmdLeaderboard table with rank-change arrows, zone markers, form dots and rows that FLIP into place.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • tables/pricing-comparison-tablethink · standard · freedesignmdPricing comparison table: plan grid with sticky first column and headers, check and dash cells and a highlighted plan.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • tables/user-admin-tablethink · standard · freedesignmdUser admin table for React: avatars, inline role menu, status pills, filter chips and a hover actions menu.Slots: ueberschrift(h2,72) · vorspann(p,240)

team (1)

  • team/team-grundcare · standard · eigenDie Menschen hinter dem Betrieb mit Namen, Rolle und Erreichbarkeit.Slots: ueberschrift(h2,60) · vorspann(p,220)

testimonials (6)

  • testimonials/case-study-cardsthink · standard · freedesignmdCase study cards: customer stories with a counting headline metric, before and after bars and a portrait quote.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • testimonials/handwritten-notesthink · standard · freedesignmdTestimonial notes scattered on a cutting mat: drag cards with spring physics and click to bring one forward.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • testimonials/portrait-quote-carouselthink · standard · freedesignmdTestimonial carousel: one large serif guest quote at a time over an arched room photo, with a portrait filmstrip.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • testimonials/press-quotesthink · standard · freedesignmdPress quotes section for a film: SVG festival laurels, a huge pull quote with drawn stars and a grid of critic quotes.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • testimonials/quote-wall-marqueethink · standard · freedesignmdTestimonial wall marquee: rows of developer posts with before and after numbers drifting in opposite directions.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • testimonials/review-grid-summarythink · standard · freedesignmdReview grid with rating summary: filtering bars, chips for verified, photos and skin type, masonry cards and helpful votes.Slots: ueberschrift(h2,72) · vorspann(p,240)

text-effects (7)

  • text-effects/animated-numbersee · nicht_standard · freedesignmdAnimated number counter: odometer digits roll to each new value, with Intl locale and currency formatting and a gain or loss flash.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • text-effects/particle-textsee · nicht_standard · freedesignmdParticle text effect: a title sampled into thousands of canvas particles that the cursor parts and a click detonates and reforms.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • text-effects/scramble-textsee · nicht_standard · freedesignmdScramble text effect: characters cycle through glyphs and lock in left to right. Hover re-scrambles, layout never shifts.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • text-effects/split-flapsee · nicht_standard · freedesignmdSplit flap display for React: an airport departure board where each cell folds through a 3D flap and rows settle in a cascade.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • text-effects/split-textsee · nicht_standard · freedesignmdSplit text animation for React: split a string into characters, words or lines and reveal it with rise, wave, blur or typewriter.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • text-effects/text-morphsee · nicht_standard · freedesignmdText morph animation: cycle through words with a letter-level morph where shared letters glide into place and the rest blur away.Slots: ueberschrift(h2,72) · vorspann(p,240)
  • text-effects/text-repelsee · nicht_standard · freedesignmdText repel effect: a headline whose letters drift away from or toward your cursor and spring home, each on its own spring.Slots: ueberschrift(h2,72) · vorspann(p,240)