DOWNLOAD ARRAYKIT

After purchase, you'll receive a download link containing ArrayKit.jsx.

INSTALL THE SCRIPT

Copy ArrayKit.jsx to your ScriptUI Panels folder:

Mac:

/Applications/Adobe After Effects [version]/Scripts/ScriptUI Panels/

Windows:

C:\Program Files\Adobe\Adobe After Effects [version]\Support Files\Scripts\ScriptUI Panels\

Alternatively, use File > Scripts > Install ScriptUI Panel and choose ArrayKit.jsx.

ENABLE SCRIPTS

Go to Edit > Preferences > Scripting & Expressions (Windows) or After Effects > Settings > Scripting & Expressions (Mac) and tick "Allow Scripts to Write Files and Access Network".

RESTART AFTER EFFECTS

Close After Effects completely and reopen it for the script to appear in the menu.

OPEN ARRAYKIT

Go to Window > ArrayKit.jsx

The panel can be docked anywhere in your workspace. It reflows automatically between a tall and a wide layout as you resize it.

SETTINGS ARE REMEMBERED

Every value you set, from gaps and pattern values to the last tab you used, is saved and restored the next time you open the panel.

THREE-TAB LAYOUT

ArrayKit is organised into three tabs:

LAYOUT TAB

Precise positioning tools:

• Anchor Grid: move the anchor point to 9 positions

• Align: left, centre, right, top, middle, bottom

• Align To: selection, comp or key object

• Redistribute: exact pixel gaps, vertical or horizontal

PATTERNS TAB

Build and animate patterns:

• Pattern icons for every 2D and 3D pattern

• Pattern values, Count, Z Step and Facing

• Aim and Drawn direction

• Rotate items, Parametric rig and Follow Leader toggles

• Generate and Arrange

• Colour panel linked to ColorCraft

• Rig tools: Update Indices and Bake Rig

ANIMATE TAB

Motion tools:

• Reorder Layers: sort the stack by position

• Follow Leader: Leader or Chain mode with frame delay

• Follow position, scale, opacity and rotation

PANEL FEATURES

• Drawn icons: every button is a clear visual icon, with tooltips on hover

• Status line: confirms every action without pop-up alerts

• Help button (?): a quick reference for every feature

• Undo: every action is a single undo step

ANCHOR GRID

Move a layer's anchor point without the layer moving:

1. Select one or more layers

2. Click one of the 9 anchor buttons (corners, edges or centre)

The anchor moves and the layer stays exactly where it is, even when it's scaled, rotated or parented.

ALIGN LAYERS

1. Select the layers to align

2. Choose what to align to with the Align To icons:

• Selection: aligns within the bounds of everything selected

• Comp: aligns to the composition frame

• Key Object: aligns to the first layer you selected

3. Click an align button: left, horizontal centre, right, top, vertical centre or bottom

SHORTCUTS

• Alt + click any align button: align to comp

• Shift + click any align button: align to key object

• One layer selected: always aligns to the comp

PARENT AND DIMENSION SAFE

Align works correctly on parented layers and layers with separated position dimensions.

EXACT PIXEL GAPS

Space layers with a precise gap between their edges, just like Figma's spacing:

1. Select the layers to space

2. Choose a direction: Stack vertically or Line up horizontally

3. Enter the Gap in pixels (0 is allowed for edge to edge)

4. Click Redistribute

LAYER ORDER

• Off (default): layers are sorted by their current position first, so they stay in visual order

• Keep selection order on: layers are spaced in the order you selected them

PERFECT FOR

• Lists, menus and UI stacks

• Lower thirds and text blocks

• Card layouts and galleries

• Icon rows with consistent spacing

GENERATE OR ARRANGE

• Generate: select one layer and ArrayKit duplicates it into the pattern

• Arrange: select layers you already have and ArrayKit lays them out

HOW TO USE

1. Select a layer

2. Open the Patterns tab and click a pattern icon

3. Set Count and the pattern values

4. Click Generate

SEVEN 2D PATTERNS

CIRCULAR

Radius, Arc and Start Angle. At 360° items space evenly; a smaller arc puts the first and last items on its ends. 0° is 3 o'clock and angles run clockwise, so -90 starts at 12.

GRID

Spacing, Columns and Rows. Leave Columns and Rows at 0 for an automatic, near-square grid.

LINEAR

Spacing and Angle. A straight line centred on the source, at any angle.

SPIRAL

Start Radius, Spacing and Turns. Each item steps further out as the spiral turns.

WAVE

Spacing, Height and Frequency. A line bent into a sine wave. On a rig, animate Phase to make it travel.

RIPPLE

Base Radius and Ring Offset. Concentric copies that grow outward, with stroke weight kept constant on every ring.

SCATTER

Max Radius, Seed, Min Scale and Max Scale. A seeded random spread with random size and turn. The same seed always gives the same layout.

OPTIONS

• Rotate items: Circular and Spiral items face along the path; Scatter items get a random turn

• Values are remembered per pattern, so switching patterns never loses your settings

TAKE PATTERNS INTO DEPTH

The second row of pattern icons is the 3D pack. These patterns spread items in X, Y and Z.

HELIX

Radius, Turns and Height. A corkscrew where items climb as they turn.

SPHERE

Radius. Items spread evenly over a ball.

CYLINDER

Radius, Height and Rings. Stacked rings of items, like a drum or carousel.

GRID 3D

Spacing, Columns and Rows. A block of items in rows, columns and layers. Leave both at 0 for a cube.

FOOTBALL

Edge and Gap. A real football made from hexagon and pentagon patches (see Football Build).

ANY 2D PATTERN IN 3D

• Z Step: pushes each item further back in depth (0 keeps them flat)

• 3D checkbox: builds any 2D pattern as 3D layers with a 3D controller

FACING

Choose how each item turns in 3D:

• Flat: items keep their own orientation

• Face camera: items always turn to face the camera

• Face outward: each item's front faces away from the centre (globes, drums)

• Face along path: each item looks along the pattern's line (slinkies, worms, chains)

3D CONTROLLER

3D rigs use a 3D controller null. Rotate it on X or Y to tilt the whole formation, and keyframe Y Rotation to spin it.

ONE CONTROLLER, THE WHOLE PATTERN

Turn on the Parametric rig toggle before you Generate. ArrayKit builds a controller null and links every item to it.

WHAT YOU CAN ANIMATE

• Every pattern value becomes a slider on the controller (Radius, Spacing, Turns and so on)

• Move, rotate or scale the controller to move the whole pattern

• Active Count: fades items on one after another. Keyframe it from 0 to the count for a smooth build on

• Taper %: first item full size, shrinking to the last (negative grows them instead)

• Phase (Wave): keyframe 0° to 360° with loopOut() for a travelling wave

• Aim Offset: fine-tunes Aim when it's on

UPDATE INDICES

Duplicated some rig layers? Select them all with the controller and click Update Indices. Every layer is re-numbered and the pattern rebuilds with the new count.

BAKE RIG

When you're done, click Bake Rig. Every layer is frozen to plain values and the controller is removed. Undo restores the rig if you change your mind.

PERFECT FOR

• Loaders and spinners

• Gauges and dials

• Travelling waves and audio visuals

• Orbiting carousels and menus

ANIMATE ONE, THE REST FOLLOW

Keyframe a single layer and the others copy its animation a set number of frames later.

HOW TO USE

1. Animate your leader layer

2. Select the leader first, then the followers

3. Open the Animate tab

4. Set the Delay in frames

5. Choose a mode and the properties to follow

6. Click Apply

TWO MODES

LEADER

Every follower follows the first layer, each one Delay frames later than the last.

CHAIN

Each layer follows the one before it, like a chain.

PROPERTIES

• Position

• Scale

• Opacity

• Rotation (X, Y and Z rotation on 3D layers)

KEEP ORIGINAL OFFSET

Tick this to let followers keep their own starting positions and values and copy only the leader's movement.

REORDER LAYERS

Follow Leader cascades in layer order. Use Reorder Layers to sort the stack left to right, right to left, top to bottom or bottom to top first.

REMOVE

Click Remove to clear Follow Leader and keep the layers where they are.

APPLY ON GENERATE

Turn on the Follow Leader toggle in the Patterns tab to apply it automatically after Generate, using your Animate tab settings.

LIVE PALETTES FOR YOUR PATTERNS

The Colour panel on the Patterns tab links your patterns to ColorCraft.

COLOUR SOURCES

• Project palette: the colours on ColorCraft's GLOBAL CONTROLS layer

• Saved schemes: any scheme saved in ColorCraft, added to the palette when used

HOW TO USE

1. Choose a source from the dropdown

2. Pick a mode: Random, Sequence or First

3. Click any swatch to leave that colour out

4. Tick On Generate to colour new patterns, or select layers and click Apply

Each layer gets a Fill effect linked to the palette colour, so changing a colour in ColorCraft updates every item.

KEEP MATCHING COLOURS APART

In Random mode, no two neighbouring items share a colour:

• 2 colours is enough for a line or ring

• 3 colours for a grid

• 4 colours for dense 3D shapes like spheres and helixes

SHUFFLE

Click Shuffle to try the next seed and recolour the selected layers. The Seed matches the Figma and Illustrator plugins.

REQUIREMENTS

The Colour panel needs ColorCraft colours in the project or a saved ColorCraft scheme. Click the reload button after adding colours in ColorCraft.

ONE ENGINE, EVERY APP

ArrayKit for Figma and ArrayKit for Illustrator are free. They use the same pattern engine as After Effects, so the same values and seed give the same layout in every app.

ARRAYKIT FOR FIGMA

1. Install ArrayKit from the Figma Community (free)

2. Select a layer and open the plugin

3. Pick a pattern and set its values

4. Click Preview, then Generate

Includes Aim, random scale and rotation, Gap spacing for grids, and colours from your Figma variables and styles.

ARRAYKIT FOR ILLUSTRATOR

1. Run it from File > Scripts > Other Script, or place it in Illustrator's Scripts folder to keep it in the menu

2. Select one object

3. Pick a pattern, Preview, then Generate

Includes Aim, random scale and rotation, and colours from your swatch groups. Settings are remembered between sessions.

DESIGN, THEN ANIMATE

Lay out a pattern in Figma or Illustrator, note the values and seed, and rebuild it in After Effects with a rig to bring it to life.

GIVE EVERY ITEM ITS OWN TILT

Every 3D rig controller has three extra sliders:

• Tumble %: how much each item tilts on X and Y (0 = flat, 100 = fully tumbled)

• Stagger: how much earlier the first items settle than the last (0 = all together)

• Tumble Seed: a different set of tilts

THE LOGO RESOLVE

1. Generate a pattern with 3D ticked and Parametric rig on

2. On the controller, keyframe over about 2.5 seconds:

• Tumble % 100 to 0

• Scale 200% to 100%

• Y Rotation 75° to 0°

• Z Step 100 to 0 (2D patterns)

3. Select the keyframes and apply Easy Ease (F9)

Items fly in, tumble and land one after another into the final shape.

PERFECT FOR

• Logo stings and end cards

• Icon reveals

• Spiral vortex intros

• Cube and block assemblies

AIM

Turn every item to point in a direction, on any pattern:

• To centre: items point at the middle

• Outward: items point away from the middle

• Along path: items follow the line of the pattern

• Off: no aiming

DRAWN DIRECTION

Set Drawn to the way your artwork points as you drew it. An arrow drawn pointing up = Up. ArrayKit works out the rest.

HOW TO USE

1. Draw an arrow pointing up

2. Choose Circular, Count 12

3. Set Aim to To centre and Drawn to Up

4. Turn on Parametric rig and Generate

Rotate or move the controller and every arrow keeps pointing at the centre. Aim replaces Rotate items when it's on.

FACE ALONG PATH (3D)

For depth, use the Facing option Face along path. Each item turns to sit square to the line, live as you animate.

• Rings on a Wave with Frequency 0.5 make a walking slinky

• Rings on a Helix make a coiled spring

• Filled discs on a Wave with Taper make a worm. Animate Phase to make it wriggle

PERFECT FOR

• Arrows and call to action graphics

• Flow and direction diagrams

• Slinkies, springs, worms and chains

A REAL FOOTBALL FROM YOUR OWN PATCHES

ArrayKit places 20 hexagons and 12 pentagons exactly where they sit on a football, with every seam lined up.

HOW TO USE

1. With the Polygon tool (under the Star tool), draw a hexagon: 6 points, point at the top

2. Draw a pentagon: 5 points. Any size, ArrayKit matches it to the hexagon

3. Select both

4. In the 3D row, choose Football. Leave Edge at 0 (automatic) and set Gap to taste

5. Click Generate

All 32 patches are parented to a Football Controller, so moving or rotating the controller rolls the whole ball.

EXPLODE CONTROLS

• Explode %: 0 is the finished ball, 100 is blown apart

• Spread %: how far the patches fly

• Stagger: the top patches land first, sweeping downwards

• Tumble Angle: how wildly patches spin on the way

• Tumble Seed: a different spin for each patch

THE BUILD

Keyframe Explode % 100 to 0 over about 3 seconds with Easy Ease, and Y Rotation -120° to 30° to roll it in.

PERFECT FOR

• Match day graphics

• Sports brands and score stings

• Team line-up intros

WORKFLOW TIPS

TRY IT IN THE PLAYGROUND FIRST

Explore patterns and recipes in the online playground, then copy the exact settings into the panel.

SET THE ANCHOR FIRST

Patterns place items by their anchor point. Centre the anchor with the Anchor Grid before generating, especially for anything that rotates or tumbles.

USE A RIG WHEN IN DOUBT

A rig keeps every value editable. You can always Bake it later.

BUILD ON WITH ACTIVE COUNT

Keyframe Active Count from 0 to the count for a clean, staggered reveal without touching individual layers.

KEEP SHAPES SIMPLE

Small shape layers render fastest. With hundreds of items or detailed 3D models, test with a low Count first.

EASY EASE EVERYTHING

Most recipes look best with Easy Ease (F9) on the controller's keyframes.

3D RENDERER

Extruded shapes and 3D models need the Advanced 3D or Cinema 4D renderer, set in Composition Settings. Classic 3D shows them flat.

COMPATIBILITY

ArrayKit works with After Effects CC 2019 and later on both Mac and Windows. It's compatible with other plugins and scripts.

OMMON ISSUES

ARRAYKIT DOESN'T APPEAR IN THE WINDOW MENU

• Check ArrayKit.jsx is in the ScriptUI Panels folder, not the Scripts folder

• Restart After Effects after installing

• Make sure you installed it in the version of After Effects you're running

"THAT LAYER IS ALREADY PART OF A RIG"

Rig layers are driven by the controller. Use the controller sliders, or click Bake Rig first if you want to rearrange them.

ITEMS WOBBLE OFF CENTRE AS THEY TUMBLE

Move the layer's anchor point to its centre with the Anchor Grid, then generate again.

NO ROTATION ON THE 3D CONTROLLER

If the controller only shows one Rotation, it was built in 2D. Tick 3D (or use a 3D pattern) and generate again to get X, Y and Z rotation.

FOOTBALL SEAMS DON'T MEET

Draw the hexagon and pentagon with the Polygon tool, point at the top (the default). Turned polygons won't line up.

COLOUR PANEL IS EMPTY

Add colours in ColorCraft or save a ColorCraft scheme, then click the reload button.

3D SHAPES LOOK FLAT

Set the comp's 3D Renderer to Advanced 3D or Cinema 4D in Composition Settings.

GETTING HELP

If you encounter issues not covered here:

Email: hello@thecreativesupply.com

Response time: Within 24 hours

Include in your email:

• After Effects version

• Operating system (Mac/Windows)

• Description of the issue

• Screenshots if possible

FEEDBACK & FEATURE REQUESTS

We're constantly improving ArrayKit. If you have suggestions for new features or improvements, email hello@thecreativesupply.com. Your feedback helps shape future updates.

UPDATES

All ArrayKit updates are free for existing customers. You'll receive an email when new versions are available.