Seventeen — Creative Studio
A print-spread studio site where photographs crop into a giant numeral and sit inline inside the sentence.
DOM + CSS0 deps1 file · 6 KB TSX
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
// ---------------------------------------------------------------
}Details
About this whole site
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.
