Make the homepage yours

Your homepage is an ordinary Astro page at src/pages/index.astro. It owns the introduction, artwork, calls to action, and the order of its sections. Alkemist’s packages supply the shared layout, theme, and publishing components.

The current Alkemist opening

The demo homepage uses Flux core. src/components/FluxHero.astro owns its headline, description, links, and responsive composition. Edit that file to change the opening; src/pages/index.astro owns the toolkit links, setup section, and notebook below it. StartUsing.astro supplies the agent and terminal setup flows.

The hero uses the same FormArt.astro and flux-core.ts geometry as the field study. Its presentation="hero" renders the artwork without a toolbar, instructions, caption, annotations, or equations. It prioritizes the still image and fits the object a little closer. Click or tap the art to pause or resume its subtle motion; dragging turns it and leaves it paused. Keyboard users can focus the art, toggle motion with Space or Enter, turn with arrow keys, and reset with Home. Reduced motion starts still, and unavailable graphics retain the poster without a diagnostic paragraph. Shared canvas styles live in src/components/forms/art.css; gallery controls and layouts stay in the studies.

Replace the hero with your own image, AlkModel, or site-owned visual without changing the theme package. The homepage development note explains the composition. This demo artwork is not installed automatically by the starter.

A small composition

Use AlkLayout for the surrounding navigation and theme, then compose your own content inside it. siteName and tagline control the identity; the generated starter’s SiteLayout.astro sets those values for your site.

---
import AlkLayout from '@alkemist/ui/AlkLayout.astro';
import AlkModel from '@alkemist/ui/AlkModel.astro';
---

<AlkLayout title="Our lab" siteName="Our lab" tagline="research notes">
  <h1>A place for our working ideas.</h1>
  <p>Experiments, data, and what we are learning.</p>
  <AlkModel
    src="/models/prototype.glb"
    title="Our current prototype"
    poster="/models/prototype.webp"
  />
  <a href="/blog/">Read the notebook →</a>
</AlkLayout>

Supply your own assets at those public paths. For a site deployed under a subpath, build asset and navigation URLs from import.meta.env.BASE_URL, as the starter does. See model support and limits for the current GLB/glTF contract.

An art-led opening

The demo’s hero studies compare three compositions. These live in the demo site and are not automatically installed by the starter:

The comparison layout is src/pages/labs/hero-studies.astro; its copy and section order are local to the demo. The shared AlkChart, AlkModel, AlkMath, and AlkCode components remain usable independently. The custom sculpture and flow experiments do not imply a generalized shader, splat, or NeRF API.

For an image opening, import a local image from src/assets/ into Astro’s Image component. The demo generates multiple WebP widths with explicit dimensions and alt text. Follow Astro’s image guide when changing the image or sizing behavior. The exact prompt for the demo’s generated art is recorded at docs/art/working-surface-prompt.md in the source repository.

Mathematical and engineering openings

Enneper, Gyroid, Dipole, and Reduction compare four detailed subjects. The comparison uses transparent stills; opening a take activates its live 3D view. The development article explains the equations, construction, and model limits.

The source filenames and URL take identifiers are stable across rounds. catalog.ts supplies the current names, copy, and equations. Each geometry module returns indexed surfaces, optional analytical normals, contour lines, local annotation anchors, and a rigid pose. materials.ts supplies the shared ink colors and neutral substrates. Surfaces can declare a colorRamp along a local axis; the renderer interpolates those palette stops in linear color space. These are illustrative finishes, not measured data. runtime.ts owns lighting, actual-vertex camera fitting, projected leaders, zoom, and lifecycle. FormPoster.astro projects contour lines for the no-WebGL view.

The page and src/styles/sculpture-studies.css own composition and spacing. Refresh the stills using docs/art/capture-color-forms.cjs in the demo repository, then copy all four completed PNGs into src/assets/forms-color/. Capture into an unwatched directory first so asset hot reload does not interrupt the next view. Preserve src/assets/forms/ and src/assets/forms-engineering/ as the earlier articles’ historical images. The color iteration explains the current finishes.

These are local design studies, not installed starter presets or new shared component APIs. Use the review controls to compare boards, technical annotations, and captions, and to copy a preferred take. The revised studies use a new browser preference key so a favorite from the earlier geometry is not silently treated as a selection of its replacement.

Substantial field sculptures

The next round, Field studies, explores four new bodies inspired by the nested Dipole composition. It has its own route, take identifiers, and saved preferences; the previous four remain available.

fieldStudies in catalog.ts owns the copy, equations, and constructors. The page is src/pages/labs/field-studies.astro; its scoped styles are in src/styles/sculpture-studies.css. Start with these site files when adopting a direction. Annotations default to hidden, and the resting pose has enough volume to serve as the opening image without labels.

Refresh the actual rendered stills with docs/art/capture-field-studies.cjs, then copy the four completed captures into src/assets/fields/. The page supplies those images to FormArt.astro as its optional poster prop, retaining the same artwork when JavaScript or graphics are unavailable. The earlier gallery continues using its procedural fallback. The development article records each construction and its illustrative limits.

Preserve the useful defaults

Keep controls keyboard accessible, provide a still image when a graphics engine is unavailable, and let a reader pause animated art. The sculpture study starts a slow orbit unless reduced motion is preferred; its small companion drifts gently. Dragging, keyboard input, or the pause control stops both motions. The shader study remains still until Play is pressed. Both stop drawing while hidden or outside the viewport. Check the opening on both boards and a narrow screen, with the ordinary reading content below it.

Place your changes in the consuming site’s files. Package updates can then improve the shared components without rewriting your homepage, assets, or research content. The starter update workflow preserves those user-owned files.