Teralith Incorporated
Component library
The parts Teralith builds client sites from: small primitives, page blocks, and complete templates that use them. Every block reads its colours and type from a handful of tokens, so one template can carry many brands. Switch any template to wireframe view to show a client the structure before the design.
- Templates
- 4
- Blocks
- 44
- Primitives
- 14
- Motion
- 13
Templates
Cinematic
Portfolio for a director, cinematographer or photographer. Full-bleed reel on the home page, filterable work in grid and list views, a single-frame photo viewer, a draggable journal and a long-form about page.
Suits: Filmmakers, photographers, creative studios, production houses
Spa
Motion-forward site for a spa, salon or beauty studio. Masked hero lines, a drifting word ticker, count-up numbers, a pinned visit story, a before and after slider, packages, a price list, a filmstrip of the space and a curtain page transition.
Suits: Spas, salons, beauty and aesthetics studios, wellness retreats
Property
Site for an estate agent, letting agency or developer. A home page with featured listings, a pinned buying story and agent profiles; a filterable listings page; a page per property with its facts and features; an enquiry form that never claims a send.
Suits: Estate agents, letting agencies, developers, villa rental owners
Components
All componentsBlocks
- BeforeAfterTwo pictures of the same subject under a draggable divider. A real range input, so touch, mouse and arrow keys all work.
- BentoGridTiles of different sizes in one grid: large, wide, tall and small, with optional picture or icon.
- CardGridEven cards on a raised surface with icon, text, meta line and link.
- CinemaHeroFull-bleed featured reel with cross-fades, a slow push-in, a film ruler and a pause control.
- ConditionIndexA to Z list with a sticky letter bar that jumps to each group.
- ContactFormAccessible enquiry form: checks on blur and submit, announced errors, honeypot, pending state, honest result from a server action.
- CreditsListFilm credits as a definition list.
- CtaBandFull-width call to action on the accent colour.
- DialogModal on the native dialog element, in centre, drawer and sheet forms. Focus trap, Escape, focus return and scroll lock come from the browser.
- DisplayHeadingOversized page title with an optional bracketed count at its shoulder.
- DragCarousel and FrameCardHorizontal strip with drag, snap and arrow paging, filled with tall frame-numbered cards.
- EmptyStateA screen or panel for nothing here: a 404, an empty list, no results. Always names the next step.
- FactListLabel and value pairs in a ruled grid, read as one definition list: bedrooms, floor area, year built, tenure.
- FactsGridA short row of label and value pairs under a hairline.
- FaqListQuestions that open in place, on native details elements.
- FilmstripMarqueeStills drifting sideways under a two-word header. Pauses on hover; scrolls by hand under reduced motion.
- FooterBarOne-line footer: place code and cycling roles, a link, a note, back to top.
- FooterColumnsMulti-column footer: brand and blurb, link groups, contact, legal line.
- FrameRulerFilm-edge ruler with numbered segments and a playhead. Drives CinemaHero.
- FullscreenMenuFull-screen numbered index menu on a modal dialog: focus trap, Escape, scroll lock, closes on navigation.
- ImageGridThumbnails that open in a full-screen viewer with arrow keys, previous and next, a counter and captions. Built on Dialog.
- ListingCardOne property: picture, status tag, price, title, place and bed, bath and floor area. The whole card is a single link named by the title; land shows its type instead of room counts.
- ListingFiltersFilters and a grid of listings in one client block: buying or renting, type, minimum bedrooms and a price sort. A live count announces each change, and an empty result offers a way back.
- LocationCard and HoursTableAddress, phone, email and directions with a photo, plus opening hours as a table.
- LogoWallClient logos at low contrast, full strength on hover, with a count.
- NavBarSticky bar with inline links and a booking button; a calm full-screen menu on phones.
- NewsletterSignupOne-field signup for a newsletter or waitlist. Checks the address, hides a honeypot, and shows exactly what the action reports.
- PageHeaderSubpage opener with breadcrumb, eyebrow, h1 and lead.
- PhotoViewerSingle-frame viewer: thumbnail rail, registration marks, counter and shot details. Arrow keys step.
- PriceListA grouped menu of services and prices with a dotted leader from name to price. Spa, salon, clinic and restaurant menus all fit; each line can link to its own page.
- PricingTiersTwo to four packages side by side with one featured. Prices are written strings with the currency, never computed.
- ProfileIntroAbout-page opener: label row, the name at display size, roles and city.
- SiteHeaderFixed top bar: wordmark, clock, call to action and the menu button that opens FullscreenMenu.
- SplitBioLong-form bio beside a portrait that stays in view.
- SplitHeroHeadline, lead, actions and reassurances beside a tall image with a floating card.
- StatementBandOne huge bracketed line between registration marks.
- StatsStripA row of headline numbers with labels and sources. The label reads first for screen readers; the number leads on screen.
- StepsListNumbered steps in a row: first visit, how it works, what happens next.
- TabsAccessible tabs: arrow keys, Home and End move and open, one tab stop, every panel in the page.
- TeamGridPeople with photo or initials, role, credentials and a short bio.
- TestimonialWallCustomer quotes as figures with a cited name, packed into columns, or one large featured quote. Initials stand in for photos.
- WorkGridProject cards in alternating rows of two and three, framed by hairlines.
- WorkIndexProjects page body: heading, view switch, category filter, then WorkGrid or WorkList.
- WorkListThe same projects as an index: number, title, credits, year, category.
Motion
- CountUpA whole number that counts up when it scrolls into view. The server HTML and screen readers carry the final figure from the start.
- CursorRingA soft ring that trails the mouse and swells over links and buttons. Decoration on top of the normal cursor; mouse and pen only.
- MagneticPulls a button or link a few pixels toward the pointer as it nears. Mouse and pen only; touch, keyboard and reduced motion get the plain element.
- MaskRevealHeading lines rise from behind a mask, 0.35 s apart. On load or on entering view; never hides a heading that is already on screen.
- PageTransitionAnimates one page out and the next in with the browser's view transitions: a curtain wipe or a fade and lift. Goes in a template.tsx. Needs React 19.3.
- ParallaxSceneLayers drift at different depths as the scene scrolls past. Pure CSS scroll timeline; still layers where unsupported or when less motion is asked for.
- PinnedStepsScrollytelling: a pinned panel changes as each step crosses the middle of the screen, with a progress rail. Phones get each visual inline instead.
- RevealBrings a block in as it scrolls on screen: rise, fade or scale, with an optional delay for staggering. Visible without scripts; blocks already on screen never flash.
- ScrollProgressA thin bar that fills as the page scrolls. Pure CSS scroll timeline; hidden where unsupported or when motion is reduced. Here it sits at the top of the demo frame.
- TextMarqueeA big ticker of words that drifts sideways. Pauses on hover; becomes a plain wrapped line when motion is reduced. The repeat is hidden from screen readers.
- TiltCardA card that leans toward the pointer in 3D and settles when it leaves. Mouse and pen only.
- ToastProvider and useToastSmall notices that stack in a corner and leave on their own. Hover or focus pauses them; errors are announced at once, others politely.
- WordRevealA large statement whose words light up one at a time, in reading order, as it scrolls past. Pure CSS scroll timeline; muted words stay at 3:1 contrast, and every word shows at full strength where unsupported or when less motion is asked for.
Primitives
- ButtonLinkLink styled as a button: solid accent, outline, and inverse pair for accent backgrounds.
- CountBracketed, zero-padded monospace number for headings and filters.
- CrosshairThin registration mark. Decorative, hidden from assistive technology.
- CursorReadoutDecorative pointer coordinates, like a camera monitor overlay. Mouse only.
- FilterChipsOutlined filter chips; the active chip fills with ink.
- LiveClockTicking local time for the studio's city, hydration safe.
- MediaThe one image slot every block uses: next/image filling a sized box, marked for wireframe mode.
- MonoLabelSmall uppercase monospace label with an optional bracketed index. The eyebrow and caption style.
- PillLinkOutlined pill call to action with a diagonal arrow that fills on hover.
- RoleCyclerSteps through a list of roles. Reads the full list to screen readers; still under reduced motion.
- SectionHeadingEyebrow, h2, lead and an optional action: the opener for any page section.
- SegmentedToggle"View 1|2" switch. Pressed-state buttons inside a labelled group.
- UnderlineLinkUppercase link whose underline retracts on hover. Off-site links open safely in a new tab.
- WordmarkText wordmark in the template's wordmark face, linked home.