Templates

How templates work

When you click Add New in the Physicks menu, you’ll see a gallery of templates. Selecting one opens the editor with a complete composition pre-loaded — objects, settings, and physics already configured. From there, you can edit any property, add or remove objects, and save your customized version.

Templates are starting points, not limits. Anything you can do from scratch, you can do from a template.

If you prefer to start completely from zero, choose Blank Canvas at the end of the gallery.

The templates

Falling Objects

Objects fall from the top of the canvas with realistic gravity. They bounce, rotate, and react to each other on the way down.

Best for: hero sections, product launches, attention-grabbing animations on landing pages, seasonal effects.

Key settings: gravity, bounce, fall stagger.

Floating Bubbles (Pro)

Objects drift gently across the canvas in slow, organic motion, simulating bubbles or particles in suspension.

Best for: backgrounds, ambient effects, decorative areas of a page where you want movement without distraction.

Key settings: floating motion speed, change rate.

Collision Arena (Pro)

Objects start in motion and bounce off each other and the canvas borders, creating dynamic collision patterns.

Best for: showcasing the physics engine, interactive demos, energetic homepages.

Key settings: collision, bounce, friction.

Bouncing Balls

A classic physics demo: objects start with initial velocity and bounce naturally under gravity.

Best for: educational sites, simple but effective hero animations, sites with a playful tone.

Key settings: gravity, bounce, ground direction.

Click to Drop

Objects only fall when the visitor clicks on the canvas. Each click drops a new object.

Best for: interactive landing pages, gamified experiences, call-to-action sections that reward exploration.

Key settings: falling mode set to click, single drop, loop.

Magnetic Cursor (Pro)

Objects react to the visitor’s mouse, either being pushed away or attracted to the cursor.

Best for: navigation menus, image galleries with reactive elements, sites that want a tactile feel.

Key settings: cursor repulsion, repulsion radius, repulsion force, mode (push/pull).

Image Gallery (Pro)

A grid of images that respond to physics. Visitors can drag them, throw them, and watch them collide.

Best for: portfolios, photographers, agencies showcasing work, product galleries.

Key settings: drag enabled, lock bounds, collision.

Text Cloud (Pro)

Words behave as physical objects. They can fall, float, collide, or react to the cursor.

Best for: typographic landing pages, brand statements, creative copy, magazine-style sites.

Key settings: shape set to Text, content per object, font.

Blank Canvas

An empty canvas with no pre-loaded objects or settings. Start completely from scratch.

Best for: experienced users, custom projects, anyone who already has a clear vision in mind.

Customizing templates

Every template is fully editable. Once you load one:

• Add or remove objects to fit your content.
• Change colors, sizes, and shapes to match your brand.
• Adjust physics settings in the bottom panel to alter the feel.
• Configure responsive layouts so it works across desktop, tablet, and mobile.

The template name and structure don’t constrain you — feel free to take “Falling Objects” and turn it into something that bounces, floats, or behaves entirely differently. Templates are conversation starters.

Saving as your own template

Currently, Physicks doesn’t include a built-in way to save your customizations as reusable templates. If this is something you’d find useful, let us know — we’re considering it for a future release.

In the meantime, you can use the Raw JSON view in the editor to copy the entire data of a composition and paste it into another. This effectively lets you “duplicate” any composition as a starting point for new ones.

Looking for more inspiration?

The 8 templates above are starting points designed to teach you what each physics behavior does. Once you’re comfortable with the basics, head to our Examples gallery to see more elaborate compositions — fully built scenes that combine multiple features in creative ways.

Each example in the gallery is a real composition built using only Physicks, with no custom code. You can interact with them directly on the page and use them as reference when designing your own.