Help with your creation

Transparent PNGs and self-contained SVGs work well for logos. For photos, start with Original color and Fine grain. Text and built-in shapes are in Source.

Supported self-contained GLB and OBJ files create real 3D grain geometry. A photo in 3D creates image relief. If an import fails, your existing creation stays in place.

More adjustments contains exact grain size, density, image detail, background removal and edge breakup.

Background removal is based on the source's border-connected flat color. It is not semantic subject detection. Transparent source artwork gives the most predictable cutout.

Undo and Redo step through every edit in the current Studio session, including source replacements and 3D rotation. Use Ctrl or Command + Z to undo, with Shift to redo. Reopening Studio restores your saved artwork but starts a new undo history.

Switch between 2D and 3D to view the same creation. In 3D, drag the angle pad to change rotation and tilt. Front view resets the viewing angle. Image relief adds depth to a flat source; an imported 3D model already has spatial geometry.

Opening plans or signing in preserves your current creation for the return. If saving fails, retry while Studio is still open. Exporting a PNG or SVG creates a finished file, not an editable Grainform project backup.

A draft in browser storage is not a cloud backup. For important work, save to an account and keep copies of your original source and exported files.

All formats other than the free PNG preview need Pro. Monthly and one-time Pro include the same supported exports. Purchase access is attached to the account used at checkout after server verification.

MP4, a dedicated Framer component and a public conversion API are not currently offered. Keep a WebM master and check the requirements of the site where you plan to publish it.

Export React component and put the downloaded Grainform.jsx beside your page component. Import its default export. The component includes the grain data and canvas interaction; it does not require a Grainform package or API key.

import Grainform from "./Grainform.jsx";

export default function Artwork() {
  return (
    <div role="img" aria-label="Interactive grain flower"
      style={{ maxWidth: 720 }}>
      <Grainform />
    </div>
  );
}

In a React framework with server components, put this wrapper in a client component using "use client"; at the top. The generated component uses canvas and React hooks.

Export HTML embed and host grainform.html on your own site. It can run as a standalone page. To embed it inside another page, use an iframe and choose an aspect ratio that matches the artwork.

<iframe
  src="/grainform.html"
  title="Interactive grain artwork"
  loading="lazy"
  sandbox="allow-scripts"
  style="display:block;width:100%;aspect-ratio:1;border:0"
></iframe>

Upload the exported file to your hosting provider first. This example points to your own domain, not a public Grainform project link. If your hosting uses a strict Content Security Policy, it must permit the generated inline script through an appropriate script hash.

Use the PNG or SVG in a normal image element, with meaningful alternative text. SVG scales cleanly, but thousands of circles can be heavier than a PNG. Test the actual file on a phone before making it a large background.