Seventeen — Creative Studio
A print-spread studio site where photographs crop into a giant numeral and sit inline inside the sentence.
- Category
- Site Templates
- Added
- 2026-09-20
- Deps
- none
- Updated
- 2026-09-20
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Props
"use client";
import { useState } from "react";
const PAPER = "#e9e9e4";
const INK = "#0d0d0c";
const DEFAULT_SIGNAL = "#ff2d00";
export function SeventeenStudioSite({
accent = DEFAULT_SIGNAL,
studio = "SEVENTEEN",
showInline = true,
projects,
}: {
accent?: string;
studio?: string;
/** The paragraph that sets images inline as words. */
showInline?: boolean;
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this site template
This is the light, typographic member of the template set — paper rather than ink, and composed as a print spread instead of a landing page. Three devices do the work, and all three come from print. The first is the numeral: one enormous red figure with photographs absolutely positioned into its negative space at overlapping depths, so the digits crop the images and a flat number becomes a composition. It is structure rather than ornament, because the figure is the project number and the switcher changes it. The second is the paragraph with photographs set inline — not beside the text but inside the sentence, as inline-block elements on the middle baseline, so the line box still resolves and the words wrap around them. The picture becomes a word, which is rarely attempted on the web and is the single reason the section reads as a magazine rather than a text block with a gallery underneath. The third is the wordmark: a black slab with a quarter-circle bitten out by a radial-gradient mask, vector and exact at any scale with no asset to ship. Every photograph is forced to greyscale so that the only colour anywhere is the signal red.
Curator’s note
Built for viberdy 2.2 at true page scale. The inline-image paragraph is the piece worth lifting — it is rarely done on the web and it instantly reads as art direction.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Spec Ledger Section
sectionsA dense spec table with real header association, a focusable scroll region, and a sticky head that keeps its rule.
Sticky Index Section
sectionsAn editorial index with sticky year headers, and a switch that demonstrates the overflow ancestor that breaks them.
Knockout Type Plate
text effectsA headline that inverts the photograph beneath it, with a scrim that keeps it legible.