LIGHT. MATH. YOUR NEXT BUILD.

Liquid Chrome backgrounds for creative portfolios

A reflective shader can give a portfolio a distinctive entrance. Use Liquid Chrome in the introduction, then move into a stable grid so visitors can inspect the actual projects. This starter pairs a dark metallic hero with a light project section and three clearly marked sample cards.

The example is a template, not a claim about a real designer or client. Its website preview is recorded video; add your own member-downloaded Liquid Chrome kit to make the local starter interactive.

Start with the layout

npx shadcn@latest add https://striktly.com/r/chrome-portfolio.json

import { ChromePortfolio } from "@/components/striktly/chrome-portfolio";

export default function PortfolioIntroduction() {
  return <ChromePortfolio />;
}

This installs a React hero shell with a recorded preview. Connect a stable runtime loader and the downloaded config using the registry guide. For the full introduction and sample project grid, download the standalone portfolio starter or open the example.

Keep the work in focus

• Replace the sample cards with images, meaningful titles and links to your own projects.
• Place shader motion in one section rather than every card. That gives the work a quieter surrounding and avoids several competing canvases.
• Keep project previews as ordinary images with useful alternative text. The shader background is decorative and should not replace the content.
• Avoid putting body copy over the brightest reflections. Test contrast across the animation, including paused frames.

Tune the surface

Open Liquid Chrome and experiment with its published presets before exporting. Bring the downloaded configuration into the starter; the prerecorded video keeps its library palette until a real kit is connected. The shader reference lists supported controls.

Plan for mobile and motion preferences

The standalone layout switches the project grid to one column on smaller screens. Its single decorative background supports Pause motion, reduced motion and offscreen pausing. Keep the static poster useful when WebGL cannot initialize. Measure the finished portfolio on target devices; rendering budgets are not performance measurements.

Use the React lifecycle guidance and performance guide if you adapt this into your own router or page transitions. Preserve the starter's MIT notice and the separate kit license.