Imported library
3427 items in the library.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages. Sign in
Kind (button, design-system, toggle, loader, table, scroll-effect)
Mood
Industry
Style
Licence
Source repo
- Subscription
Realmagic ticker scroll
Scroll Effect
"Real Magic" Coca-Cola-flavored horizontal ticker-tape scroll built with GSAP ScrollTrigger — one continuous sentence ("In every bottle, discover the undeniable Real Magic of sharing pure Refreshment that brings us Together") laid out in a single nowrap flex line on a flat #f40009 red stage, read sideways as the pinned viewport scrubs the line horizontally (travel = scrollWidth − vw, end +=travel×1.15, scrub 0.6). Heavy Anton uppercase words alternate with faint italic Instrument-Serif connectives and outlined-stroke accent words (Magic/Together), with inline currentColor SVG glyphs (bottle, rising carbonation bubbles, signature ribbon swoosh, droplet, clinking bottles, heart full-stop) embedded like punctuation with variable per-item margins; idle looping glyph micro-motion, accent depth parallax, a cream scroll-progress bar, grain + vignette overlays, and an "Open happiness." outro after the pin releases. GSAP + fonts vendored locally, fully offline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Sticky content switch
Scroll Effect
Scroll-driven "sticky content switch" editorial template — a warm paper (#f4f1ea) / near-black (#0e0e0c) two-column section on vendored Anton + Inter with a burnt-orange (#c4622d) accent, where the left column is position:sticky and vertically pinned while six 100vh image panels scroll past on the right; an IntersectionObserver with a -50%/-50% rootMargin band fires exactly when each image's midpoint crosses screen center, crossfading + slide-swapping the pinned heading (index, kicker, title, body, meta) to match the active frame, a transform:scaleY accent progress rail with growing ticks, a rAF parallax that scales each image 1.08→1.0 toward center plus grayscale-to-color on active, a per-letter hero rise-reveal, and a ghosted-wordmark outro; six themed procedural SVG images + fonts vendored, fully offline, responsive stacked feed under 900px, respects prefers-reduced-motion.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Apex scroll hero
Scroll Effect
Apple-product-page-style "Apex" hero whose 5-second F1 sunset film is scroll-scrubbed full-screen (scroll drives `video.currentTime`) with a synced speed/gear telemetry HUD.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Bloom nested squares
Loader
The shadcn "Bloom" NestedSquares component (25 violet-gradient squares scaling and rotating forever via Framer Motion) staged in a dark motion-specimen studio — a graticule plate, ambient glow, and a calibration rail of dials that retune the live component's ring count, period, stagger, growth, spin and culture.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Aperture minimalist dark
Design System
Full "Minimalist Dark" design-system landing page for fictional dev tool "Aperture" — layered-slate palette with a warm amber accent, vendored Space Grotesk / Inter / JetBrains Mono, drifting ambient glow orbs + noise/grid ambience, a self-driving glass ⌘K command palette that types and streams a deploy log, glass-effect bento features, count-up stats, a numbered workflow + tinted config code panel, a glowing featured pricing tier, accent-line testimonials, an accessible max-height FAQ accordion, and an amber-ring email CTA.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Aurora flow landing
Design System
"Tide" deep-work-ritual landing page on the exact prompt scaffold (Vite + React + TS, Tailwind + tailwind-merge + clsx, Framer Motion, Lucide, `@/` alias, `cn()`) — a deep oceanic-twilight design whose signature is a full-width canvas "tide of light" (drifting, pointer-leaning sine bands, reduced-motion-safe), a hero that *is* a working focus session (breathing dial + live 50:00 countdown), a soundscape marquee, a 3-step Ritual timeline, a Soundscapes bento, count-up stats, scaled-tier pricing, an ARIA FAQ accordion, and a validating email CTA; vendored Fraunces/Inter/JetBrains Mono, fully offline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Bold typography design system
Design System
"OBELISK" Bold Typography design-system showcase — poster design translated to web with near-black/vermillion tokens, a 13-step type ramp, vendored Inter Tight/Playfair Display/JetBrains Mono, a parallax decorative-numeral hero, an adjective marquee, three button variants (underline/inversion/ghost), layered-text depth, zero radius, a token-flip inverted CTA, and a 200ms ARIA FAQ accordion.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Botanical organic serif
Design System
"Verdant" Botanical / Organic Serif design-system showcase — a slow-living wellness landing on centralized tokens, with hand-built fully-offline botanical SVG art masked into Roman arches, the mandatory paper-grain overlay, Playfair Display headlines using italic emphasis words, a sage/clay/terracotta palette, staggered feature & collection grids, count-up stats, soft-shadow pill buttons, a vine-growing divider, an ARIA FAQ accordion, an underlined newsletter input, and a full-screen mobile menu.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Clay design system
Design System
"Claymakers" High-Fidelity Claymorphism design-system showcase — premium digital clay with reusable 4-layer shadow stacks (deep/card/button/pressed), a candy-shop palette and vendored Nunito/DM Sans, super-rounded radii, gradient hero text, an abstract nested-clay hero, breathing count-up stat orbs, a bento feature grid with a peeking panel, a live squish/recessed-input playground, a fanned-tablet split, pricing with a scaled "popular" tier, testimonials, a recess-on-open FAQ, a working CTA, and a reduced-motion-safe blob world.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Copy machine pixel perfect
Design System
"Foundry" browser-native PCB board-studio landing built on the exact "copy machine" prompt scaffold (Vite + React + TS, Tailwind + tailwind-merge + clsx, Framer Motion, Lucide, `@/` alias, `cn()`) — a dark copper-on-substrate design whose signature is a live-autorouter `TraceField` behind the hero (45°-constrained copper traces growing to pads and pulsing vias, pointer-leaning, reduced-motion-safe) and a layer-toggle `BoardCanvas` that composites Gerber-style solder-mask/copper/silkscreen films; plus a sticky nav, a continuous-DRC bento feature grid, count-up fab stats, a 4-step schematic→route→verify→ship workflow, quote testimonials, scaled-tier pricing, and a validating email CTA; vendored Space Grotesk/Inter/JetBrains Mono, fully offline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Copy machine setup
Design System
"Copy Machine" landing-page scaffold built byte-for-byte to a fixed setup spec (Vite + React, TypeScript, Tailwind + tailwind-merge + clsx, Framer Motion, Lucide, `@/`→`/src/` alias) with the spec-pinned files reproduced character-for-character and an empty `App.tsx` awaiting the first component; ships a self-contained dark blueprint/IDE "PROJECT SETUP COMPLETE" status screen (radial-masked grid, drifting glow orbs, scanline, count-up readout, created-file tree, verbatim App.tsx code panel, tech-stack chips, copy-machine rules) rendered as a sibling of `#root`, with vendored Inter/JetBrains Mono, fully offline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Corporate trust design system
Design System
"Northwind" Corporate Trust design-system showcase — a modern enterprise-SaaS landing fully expressing the style: indigo→violet gradients, colored (blue/violet-tinted) shadows, an isometric 3D hero dashboard, soft blurred blobs, a split gradient headline, zig-zag deep-dives on tilted gradient slabs, a count-up stats band, glowing numbered steps, a scaled "popular" pricing tier, a details/summary FAQ, and a dramatic dark final CTA — all on centralized tokens.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Finsyc finance landing
Design System
"Finsyc" AI finance-management landing page applied verbatim from a 10-component template — an animated soft-gradient video hero with an expanding "Get Started" pill and brand logo marquee, color-blocked metric cards with count-ups, four product-UI feature cards (donut spend chart, balance-forecast graph, security shield, instant-transfer), a tabbed 4-step "How it works", a scroll-pinned benefits list with a progress rail, a count-up metrics band plus a center-snapping testimonial carousel, hover-activated pricing tiers with a monthly/yearly toggle, an animated integrations seal wired to 8 vendored brand icons, a blog grid, and a CTA footer with a giant rising "Finsyc" wordmark; all fonts/logos/UI art/avatars and the background video vendored locally, fully offline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Flatline design system
Design System
Complete flat-design-system showcase landing page — centralized tokens, sharp full-section color blocks (Blue/Emerald/Amber/dark), tinted color-block cards, thick outline buttons, a scaled "popular" pricing tier, multi-color stat count-ups, and high-contrast solid focus rings with zero box-shadows anywhere.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Industrial skeuomorphism
Design System
"SCHEMATIC" Industrial Skeuomorphism design-system showcase — a tactile hardware-control landing built on centralized neumorphic tokens, with an all-CSS hero device mockup (scanline screen + live dashboard), glowing LED status indicators, corner screws & vent slots on every panel, a cylindrical How-It-Works pipe connector, push-pinned testimonials with masking tape, punched-hole pricing tags, a conic-gradient radar sweep, recessed "data slot" inputs, and a matte-plastic noise overlay; vendored Inter/JetBrains Mono and all assets, fully offline & responsive.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Kinetic typography poster
Design System
Kinetic Typography design-system showcase — a festival poster page with viewport-width `clamp()` headlines, two infinite marquees, towering background numbers, hard acid-yellow color-inversion hover states, sticky-stacking cards, scroll-driven hero zoom, and a `prefers-reduced-motion` static fallback.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Luxury editorial design system
Design System
"MAISON" Luxury / Editorial design-system showcase — a full editorial landing (hero, drop-cap features, dark stats, multi-layer testimonials, ARIA FAQ accordion, blog grid, footer CTA) with vendored Playfair/Inter fonts, vertical writing-mode labels, fixed gridlines, a gold-sliding button, and a paper-grain noise overlay.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Material you showcase
Design System
"Lumi" Material You (Material Design 3) design-system showcase — a full landing page on centralized MD3 tonal tokens (purple seed #6750A4): a 48px-radius hero, layered organic blur shapes, pill buttons with state layers, glass-morphism benefits on a primary block, glow-on-hover How-It-Works badges, a recessed tonal-ramp visualizer, a lifted featured pricing tier, image-zoom blog cards, an accordion FAQ, a filled-text-field CTA, and a tertiary FAB — all on the cubic-bezier(0.2,0,0,1) easing, with vendored Roboto and fully local SVG art.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Neo brutalism loud system
Design System
"LOUDHOUSE" Neo-brutalism design-system showcase — centralized `@theme` tokens (cream/black + red/yellow/violet highlighters), hard offset shadows (zero blur) as `shadow-neo*` utilities, hollow text-stroke display type, sticker rotations, a chaos-zone hero, live token gallery, count-up stats, an interactive component playground, scaled pricing, two marquees, a keyboard FAQ, mechanical click-down buttons / lift cards / yellow-flood inputs, and a full `prefers-reduced-motion` fallback.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Neumorphism soft ui
Design System
"SOFTFORM" Neumorphism (Soft UI) design-system showcase — one cool-grey surface (`#E0E5EC`) where dual opposing RGBA shadows carve every edge: extruded / inset / inset-deep / nested depth states, hyper-rounded 32px corners, floating concentric-circle hero art, a working component playground (buttons in all states, inset inputs with accent focus rings, a switch, segmented control, draggable+keyboard slider), an inset token gallery, a soft-dark theme toggle, and zero borders anywhere; fully offline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Newsprint editorial press
Design System
Full editorial landing page expressing the "Newsprint" design system — massive Playfair headlines, zero radius, collapsed grid borders, drop caps, a breaking-news ticker, an inverted black "How It's Filed" section, grayscale halftone engravings, hard offset hover shadows, and sparing editorial red.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Playful geometric design system
Design System
"Blobby" Playful Geometric design-system showcase — a Memphis-inspired "stable grid, wild decoration" landing with centralized tokens (warm paper + slate + four rotational pop colors), chunky 2px borders, hard no-blur "pop" shadows, varied/blob radii, a blob-masked geometric mascot illustration, confetti shapes, keyword + logo marquees, a dashed-line feature grid, a star-badged scaled pricing tier, a live token gallery, an ARIA FAQ, and a focus-shadowed CTA form — all honoring prefers-reduced-motion.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Scaffold ready splash
Design System
Exact-spec single-page landing scaffold (Vite + React + TypeScript + Tailwind v3, `@/` alias, `cn()` helper, Framer Motion + Lucide) whose App shell — instead of an empty page — renders a polished, self-contained "Scaffold ready" splash: ambient drifting orbs + a panning technical grid, a gradient headline, a self-typing macOS terminal, stack chips, a scroll-sequenced setup checklist, a `src/` file tree, and a dashed "drop your first component" target; fully offline (system fonts) and `prefers-reduced-motion`–aware.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Serif editorial design system
Design System
"Roman & Quill" Serif design-system showcase — a private-publishing-house editorial landing (hero, stats, drop-cap features, asymmetric 1.3fr/0.7fr benefits, decorative-quote testimonials, gold-tinted featured pricing, journal grid, ARIA FAQ, inverted correspond form, footer) with vendored Playfair/Source Sans 3/IBM Plex Mono, a rule-line + small-caps label system, bespoke SVG engraving plates, burnished-gold accent, paper-grain overlay, and ambient glow — all on channel-format design tokens, fully offline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Swiss design system
Design System
Self-contained Swiss International (International Typographic Style) design-system showcase — strict B/W/Swiss-Red tokens, four CSS texture patterns (grid, dots, diagonal, noise), a Bauhaus hero composition, a mathematical type specimen, a 2×2 component gallery, and bold mechanical interactions (color inversions, rotating plus icons, count-up); fully offline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Verdant organic design system
Design System
Full "Organic / Natural" design-system landing for botanical apothecary "Verdant" — earth-drawn palette, Fraunces + Nunito, a global paper-grain overlay, drifting+morphing blob backgrounds, bespoke palette-drawn botanical SVG illustrations, asymmetric feature-card radii, a hand-drawn curved-dashed ritual connector, a rotated-tin product spotlight, an organic image mask, hover-tilt testimonials, and varied moss/terracotta sections; fonts + noise vendored, fully offline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - scroll-reveal-video: skill that re-encodes a video all-I-frame and maps its playback to scroll progress, with timed text overlaysSubscription
scroll-reveal-video: skill that re-encodes a video all-I-frame and maps its playback to scroll progress, with timed text overlays
Scroll Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
scrollcraft engine: zero-dependency scroll runtime driven by data-sc-* attributes (scrub video, pin, pan, flow acts; cues, drift, magnet), with a template page
Scroll Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
PinnedReveal - Staggered eyebrow → title → summary reveal as a chapter enters view
Scroll Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
MorphBackground - A scroll chapter whose background morphs between a warm and a cool palette by crossfading two stacked full-bleed gradient layers via opacity
Scroll Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Three-plane scroll + pointer parallax with depth of field and aerial perspectiveSubscription
Three-plane scroll + pointer parallax with depth of field and aerial perspective
Scroll Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Dependency-free scroll motion runtime (reveals, scroll-driven animation with IO fallback, magnetic buttons)Subscription
Dependency-free scroll motion runtime (reveals, scroll-driven animation with IO fallback, magnetic buttons)
Scroll Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Section: exploded - dark section; layers pull apart on scroll (2D parallax = depth)
Scroll Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Agentic design system (Bergside / typeui.sh) - Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.Subscription
Agentic design system (Bergside / typeui.sh) - Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.
Design System
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Artistic design system (Bergside / typeui.sh) - High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.Subscription
Artistic design system (Bergside / typeui.sh) - High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.
Design System
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Basic design system (Bergside / typeui.sh) - Print-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.Subscription
Basic design system (Bergside / typeui.sh) - Print-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.
Design System
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Bento design system (Bergside / typeui.sh) - Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.Subscription
Bento design system (Bergside / typeui.sh) - Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
Design System
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Bold design system (Bergside / typeui.sh) - Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.Subscription
Bold design system (Bergside / typeui.sh) - Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.
Design System
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Brutalism design system (Bergside / typeui.sh) - Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.Subscription
Brutalism design system (Bergside / typeui.sh) - Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.
Design System
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Cafe design system (Bergside / typeui.sh) - Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.Subscription
Cafe design system (Bergside / typeui.sh) - Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.
Design System
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Claymorphism design system (Bergside / typeui.sh) - Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.Subscription
Claymorphism design system (Bergside / typeui.sh) - Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.
Design System
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Clean design system (Bergside / typeui.sh) - Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.Subscription
Clean design system (Bergside / typeui.sh) - Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.
Design System
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Colorful design system (Bergside / typeui.sh) - Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences.Subscription
Colorful design system (Bergside / typeui.sh) - Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences.
Design System
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Contemporary design system (Bergside / typeui.sh) - Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.Subscription
Contemporary design system (Bergside / typeui.sh) - Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.
Design System
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Corporate design system (Bergside / typeui.sh) - Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns.Subscription
Corporate design system (Bergside / typeui.sh) - Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns.
Design System
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Cosmic design system (Bergside / typeui.sh) - Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.Subscription
Cosmic design system (Bergside / typeui.sh) - Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.
Design System
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in