Dot Grid Field

1. 1

   Upload dot-grid-field.min.js from the download to your site.

2. 2

   Add the script once, and a <pf-dot-grid> tag wherever you want a dot grid.

3. 3

   Pick a preset, or set your own colors, cursor mode, mask and more as attributes.

<script src="/dot-grid-field.min.js" defer></script>

<pf-dot-grid preset="horizon" style="height: 600px"></pf-dot-grid>

1. 1

   Paste script/webflow/footer-code.html from the download into Site settings → Custom code → Footer code (or host the .js file and add its script tag there).

2. 2

   Add a Code Embed element with a <pf-dot-grid> tag where you want the grid.

3. 3

   Give it a height, and publish. Custom code runs on the published site.

<pf-dot-grid preset="plasma" cursor="magnify" scroll="wave" style="height: 600px"></pf-dot-grid>

Custom code needs a paid Webflow site plan.

1. 1

   Upload dot-grid-field.min.js to your Media library or your theme, and copy its URL.

2. 2

   Add a Custom HTML block with the script tag and a <pf-dot-grid> tag.

<script src="https://your-site.com/wp-content/uploads/dot-grid-field.min.js" defer></script>
<pf-dot-grid preset="tide" style="height: 500px"></pf-dot-grid>

On WordPress.com, you need a plan that allows custom code.

1. 1

   Online Store → Themes → Edit code → Assets: upload dot-grid-field.min.js.

2. 2

   In the theme editor, add a Custom Liquid section with the script and the tag.

<script src="{{ 'dot-grid-field.min.js' | asset_url }}" defer></script>
<pf-dot-grid preset="minimal" mask="text:NEW IN" style="height: 600px"></pf-dot-grid>

1. 1

   Copy react/DotGridField.tsx into your project. It needs only React 18+.

2. 2

   Render it with a preset or your own props. Children sit on top of the grid.

import DotGridField from "./DotGridField"

<DotGridField preset="horizon" cursor="ripple" style={{ height: 600 }}>
  <h1>Your headline</h1>
</DotGridField>

Next.js: the server renders a CSS dot pattern in the same colors, then the WebGL grid takes over.

1. 1

   In your Framer project, go to Assets → Code → + → New component file, and name it DotGridField.

2. 2

   Replace the file's contents with framer/DotGridField.tsx from the download, and save.

3. 3

   Drag DotGridField onto the canvas, pick a preset (or Custom), set Mask to Text or Image if you like, and press Preview.

On the Framer canvas you see a still frame, which keeps the editor fast. Set On Canvas to Live to see it move there.