Aperveil blocks

A block is a whole section of a page (a hero, logos, features, pricing, testimonials, a FAQ, a team, a contact or sign-in form, a footer…) wearing a shader or a plain surface. Each is written once and generated for React, Vue, plain HTML and WordPress, from the same markup and stylesheet, so it looks the same everywhere.

Free blocks can be customized and downloaded without an account. Pro blocks run as live demos; their studios and downloads need an active Aperveil Pro grant. A Free block design wears a Free shader or a solid or gradient surface.

Open a block and select Customize. Every change shows live, and the download carries exactly what you see.

• Content: every line of copy. Restore example copy brings the original back.
• Appearance: the colours, and the shader the block wears with its Look and its settings. More shaders lists every shader the block can wear.
• Typography: the typefaces for headings and text.

Check the result at other widths with Preview width, or open the full page in a new tab.

Open Install and pick a platform. View code shows exactly the files the download holds, in the design you made; Download gives them as a ZIP with a README.

React and Vue blocks need their packages: the README in the download has the install line, run from your project root. Until the packages are on npm, the download includes them.

In React and Vue, the block renders with the design you made; every prop is optional and overrides one part of it:

import ContactPanelSection from "@/components/aperveil/contact-panel";

export default function Contact() {
  return (
    <ContactPanelSection
      content={{ heading: "Talk to us" }}
      onSubmit={async (values) => {
        const response = await fetch("/api/contact", { method: "POST", body: JSON.stringify(values) });
        if (!response.ok) throw new Error("Could not send");
      }}
    />
  );
}

In plain HTML and WordPress the design and copy are written into the markup: edit them there, or change them in the studio and download again.

Contact, sign-in, sign-up, newsletter, waitlist and booking blocks (and footers with a signup) come with their form. Validation is the browser's own (required fields, email addresses). Your handler receives the field values after it: return (or resolve) to show the sent message, throw (or reject) to show the error and let the visitor try again. Without a handler the form stays a preview.

• React and Vue: pass onSubmit.
• Plain HTML: replace the handler in the script at the end of index.html with your own.
• WordPress: the plugin's block/view.js holds the handler; it only logs the values until you send them to your own endpoint there.

A block names its typefaces with fallbacks, so it renders even before they load. Load them in your page: the README gives the Google Fonts link, and next/font, @nuxt/fonts or self-hosted files work as well. The WordPress plugin loads them from Google Fonts by itself; self-host them if you prefer.

The files are yours: change the markup, the stylesheet or the copy as you like. To start again from a new design, customize the block in the studio and download it again; aperveil.json in the download lists what it contains. In WordPress, upload the new plugin over the old one: WordPress offers to replace the installed version.

The block's styles are missing in Next.js.

The entry file imports the block's stylesheet, and the Pages Router accepts global CSS in pages/_app.tsx only: move the import there.

The shader behind the block is a plain colour.

The browser has no WebGPU, or no usable GPU adapter; the block shows its own background colour, as designed.

The text uses a different font.

Load the block's typefaces in your page (see Typefaces).

The form does nothing.

Give it a handler (see Forms); without one it stays a preview.

Plain HTML shows nothing.

Open the page through a web server: modules do not load from file://.