Reference
Component
Library.
Every component in src/features/website/components/Template rendered live, grouped by folder. Click a section header to expand it, then click a component name to preview it.
Template /Structure
Proportional
50 / 50
Two equal columns. The default split for side-by-side layouts. Use grid-cols-2 or flex with two flex-1 children.
1/3 · 2/3
Narrow sidebar left, wide content right. Use grid-cols-3 with col-span-1 and col-span-2, or w-1/3 + w-2/3 in flex.
2/3 · 1/3
Wide content left, narrow sidebar right. Mirrors the 1/3 · 2/3 split — swap column order only.
Equal Columns
Three Columns
Equal thirds. Classic editorial or feature grid. Use grid-cols-3 with a consistent gap.
Four Columns
Equal quarters. Common for card grids, feature lists, or dashboard tiles. Use grid-cols-4.
Five Columns
Five equal columns. Good for icon rows, logo bars, or stat displays. Use grid-cols-5.
Six Columns
Six equal columns. Dense grid for galleries or data-heavy layouts. Use grid-cols-6.
Responsive
Auto Fill
Responsive grid that auto-fills as many columns as fit at a minimum cell width. No breakpoint classes needed — grid-cols-[repeat(auto-fill,minmax(160px,1fr))].
Masonry
CSS columns-based masonry. Items flow top-to-bottom in each column. Use columns-N with break-inside-avoid on children.
Golden Ratio
Golden Ratio 38 / 62
Narrow sidebar (38.2%) with wide content area (61.8%). Perfect for layouts with supporting content on the left and primary content on the right.
Golden Ratio 62 / 38
Wide content area (61.8%) with narrow sidebar (38.2%). Mirrors the 38/62 split — swap for right-side supporting content.
Golden Ratio 4 Columns
Four columns with Fibonacci-based proportions (1:1:2:4) that approximate the golden ratio. Useful for asymmetric feature grids.
Golden Ratio 5 Columns
Five columns with Fibonacci-based proportions (1:1:2:3:5) that approximate the golden ratio. Ideal for complex multi-section layouts.
Golden Ratio 6 Columns
Six columns with Fibonacci-based proportions (1:1:2:3:5:8) that approximate the golden ratio. Best for comprehensive dashboard and gallery layouts.
Template /Navigation
Top
TopNavHeader
Fixed top bar. Logo, desktop nav links, social icons, and a hamburger drawer below 768 px. Scroll state adds a frosted glass background.
Template /Menus
Left Rail
Sidebar
Fixed left rail (≥ 768 px). Renders logo, primary nav links, social icons, and a copyright footer. Hidden on mobile.
Mobile
MobileMenu
Floating circular FAB pinned to bottom-right on mobile (< 768 px). Tap opens a full-screen drawer with primary and legal links.
Template /Headers
Page
Hero
Full-width hero. Left panel: animated WebGL gradient + tagline. Right panel: looping background video + intro copy.
Made with care.
Specializing in high-fidelity interfaces and brand identities that demand attention.
Section
LatestWorksHeading
Minimal section heading anchored to #our-latest-works. Used as scroll target for the Projects nav link.
Our Latest Works.
Template /Footers
Contact
Footer
Contact form (email / subject / message) wired to the sendEmail server action, plus address blocks, social icons, and legal links.
Template /Banners
Horizontal
Basic - Heading
Full-width Banner with 2XL Heading.
Headline.
Basic - Heading + Subheading
Full-width Banner with 2XL Heading and Subheading.
Heading.
Subheading.
Template /Sections
Services
FreeLancesSection
Two-column section. Left: editorial copy on a gradient background. Right: 2×2 grid of the four interactive service Cards.
Free Lances.
In medieval times, a 'Free Lance' was a knight whose lance was not sworn to any specific lord, but was free to be hired for their expertise and skill. Today, being a freelancer still means offering specialized skills — but it should never mean offering them for free. We believe that professional creative work deserves professional respect. We invite our clients to honor this standard, ensuring a partnership where expertise is valued and every 'lance' is fairly compensated for their effort.
Branding
Building solid foundations. Logos, systems, and guidelines that define who you are.
Marketing
Strategies that drive real growth.
Environmental Design
Visual experiences from storefronts to street art / graffiti.
Identity
WhoWeAreSection
Two-column section. Left: company description. Right: WordGlobe on gradient. Includes PartnerLogoBar on mobile only.
WHO WE ARE.
Based in Stuttgart, LOOM is a boutique creative studio dedicated to the art of visual storytelling and digital craftsmanship...
Our Partners.
WHAT WE CRAFT.
Template /Cards
Fill
BrandingCell
Service card. Hover/click fills the cell with a grid-texture background and reveals a bordered description block.
Branding
Building solid foundations. Logos, systems, and guidelines that define who you are.
Chart
MarketingCell
Service card. Hover/click animates a weighted bar chart rising from the bottom of the cell.
Marketing
Strategies that drive real growth.
Flip
FlippingCell
Service card. Hover/click triggers a 3D Y-axis flip revealing a back face with continuation copy.
Perspective
RoomCell
Service card. Hover/click assembles a perspective room from clip-path polygons and shifts content inward.
Environmental Design
Visual experiences from storefronts to street art / graffiti.
Template /Galleries
Grid
GalleryGrid + Lightbox
Responsive masonry grid (1 → 5 cols). Each item accepts a spanClass for row height. Clicking opens a keyboard-navigable Lightbox overlay.
Click any item to open the Lightbox
Template /Buttons
Brand Collection
Studio Button Collection
A collection of 20 button styles following the brand design language, ranging from primary actions to minimal utilities.
Template /Forms
Data Collection
Studio Form Collection
A suite of form styles including minimal contact inputs, secure auth layouts, and high-contrast editorial inputs.
Stay updated.
No spam, just the latest work every month.
Template /Tables
Data Representation
Studio Table Collection
High-contrast data tables optimized for readability, ranging from architectural project indices to editorial step-by-step breakdowns.
| ID | Project Name | Category | Year | Link |
|---|---|---|---|---|
| 01 | Neo-Modernism | Branding | 2026 | |
| 02 | Aether Archive | Digital | 2025 | |
| 03 | Flux Studio | Motion | 2026 |
| Service | Amount |
|---|---|
| UI/UX Strategy Phase | € 4.200,00 |
| Motion Design Retainer | € 1.800,00 |
| Total Due | € 6.000,00 |
| Step 01 | Strategy | Phase detail and methodology description. |
| Step 02 | Execution | Phase detail and methodology description. |
| Step 03 | Launch | Phase detail and methodology description. |
| Step 04 | Optimization | Phase detail and methodology description. |
Template /Lists
Project
ProjectsList
Expandable project list. Desktop: hover to expand row. Mobile: tap to toggle. Shows 5 items initially with an animated 'and more' toggle.
Template /Branding
Marquee
PartnerLogoBar
Auto-scrolling logo marquee. Decelerates smoothly on hover. Supports SVG mask logos and raster images. Hides if partners array is empty.
Our Partners.
Globe
WordGlobe
3D rotating tag cloud built with TagCloud. Reinitialises on resize. Hover state highlights a word in brand colour with a glass backdrop.
3-D rotating tag cloud
Template /Testimonials
Social Proof & Trust
Studio Testimonial Collection
High-impact testimonial layouts ranging from bold editorial pull-quotes to structured client indices and social media style cards.
"They didn't just build a website; they built a legacy system for our brand's future."
The attention to detail and architectural precision transformed our digital presence. A masterclass in modern design.
The new UI kit from @studio is absolutely insane. The spacing and typography logic is 10/10. ⚡️
Vogue
Strategic Design Partner
Tesla
Strategic Design Partner
SpaceX
Strategic Design Partner
"Beyond just aesthetics, the functional logic behind the system is what sets this studio apart from the rest."
ELENA ROSSIThe only agency that understands the intersection of art and code.
Template /Pricing
Monetization & Plans
Studio Pricing Collection
A collection of pricing architectures ranging from standard software tiers to high-end service menus and additive minimalist lists.
For emerging creators.
For scaling studios.
For global agencies.
Complete
Studio
Access.
Unlock the entire archive including source files, raw motion curves, and architectural templates.
Global License
Use in unlimited projects worldwide.
Priority Updates
Get new components 48h before launch.
Direct Support
One-on-one sessions with our team.
Brand Strategy
UI/UX Development
Motion Design
Template /Modals
Overlays & Feedback
Studio Modal Collection
A versatile collection of overlays including system alerts, full-width content reveals, and mobile-adaptive drawers.
Template /Effects
Visual
Gradient
Animated Stripe-style gradient rendered on a WebGL canvas. Accepts a unique canvasId to allow multiple instances per page.
Animated WebGL canvas
Scroll
SmoothScroll
Lenis smooth-scroll wrapper. Enabled only on desktop viewports without prefers-reduced-motion. Already active via the root layout.
SmoothScroll is a layout wrapper that enables Lenis-powered smooth scrolling on desktop viewports without prefers-reduced-motion. It is already active on this page via the root layout — just wrap your page tree with it.