---
title: "Lattice — Free Framer component · Best of Framer"
description: "Free Framer component · by ate studio · Sections. Animated Canvas Grid"
canonical: "https://framer.elliotli.dev/component/lattice"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Lattice

# Lattice

Animated Canvas Grid

[View on Framer](https://framer.com/marketplace/components/lattice/?via=elliot-li)

![Lattice preview image 1](https://framer.elliotli.dev/og/component/lattice/a5847b9887bb81ae/1600x1200.jpg)

## Summary

Animated Canvas Grid

## Description

**HEPTAGrid is a high-performance background utility for Framer, designed to bring fluid, generative motion to technical layouts.** By leveraging the HTML5 Canvas API, it renders sharp, repeating geometric patterns that animate seamlessly without the overhead of heavy video files or complex SVG structures. It provides a tactile, responsive layer for hero sections and modern UI, maintaining 60fps performance across all devices.

-   **Precision Control:** Fine-tune cell size, gap spacing, and line thickness directly from the Framer properties panel to match your brand's aesthetic.
    
-   **Omnidirectional Motion:** Choose from 8 directional flow states—including all diagonal vectors—for perfectly aligned motion paths.
    
-   **Zero Dependency:** Built with pure Canvas logic. No GSAP, no external libraries, and zero bloat for lightning-fast page loads.
    
-   **Retina Ready:** Automatically detects device pixel density and container resizing, ensuring your grid stays crisp on every screen.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #2395

## Details

- **Author**: ate studio
- **Published**: 2025-11-21
- **Updated**: 2026-10-09
- **Added**: 2025-11-17
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove