Welcome to Lark!

Lark is a vector animation editor and runtime designed specifically for embedded microcontrollers. We use it in-house to create all the animations for little guy.

Lark is pretty easy to pick up. If you're familiar with vector graphics software like Figma, Adobe Illustrator, or Sketch, you should feel right at home.

All graphics in Lark are vector and rendered in realtime on the microcontroller and in the Mac app. This has several advantages:

• animations can be rendered at any resolution or framerate
• animations can easily be sped up or slowed down
• animations can be blended together (for example, look left + wave)
• animation states can be smoothly transitioned
• animation files are tiny enough to fit hundreds on the device

For now, Lark is closed source and invite-only. You should have received a TestFlight invite when you purchased a little guy dev kit. If you didn't get an invite, email me here: daniel@littlecreature.co.

Lark is under active development. We want you to push the limits and let your creativity run wild! If you're experiencing bugs, or if there's something you wish Lark could do, reach out at daniel@littlecreature.co.

Conceptual hierarchy

Animations in Lark are organized into states, objects, and keyframes.

States are relatively self-explanatory. A helpful way to think about states is mapping them onto emotions or interactions. For example, you could have a happy state, angry state, a waving state, and a default state.

Each state contains a set of objects which are rendered onto the canvas. Objects work just like objects in Figma, etc. – you can move, resize, and edit their paths.

Each state also contains a set of keyframes on a timeline. This lets you define a set of looping animations for a given state. You can animate any property of any object. For example, you could animate scale.y of both eyes to create a blinking animation.

Examples

Lark comes with a few example scenes. You can find them under File > Open Example.

States

Add a state

Add a state by tapping the plus button in the upper left.

Delete a state

Delete a state by right clicking on it, then click "Delete".

Duplicate a state

Duplicate a state by right clicking on it, then click "Duplicate".

State transitions

Lark supports dynamic state transitions. You can preview any state transition by clicking the Play button in the Keyframes section, then clicking on different states.

Lark will attempt to smoothly transition any objects that have the same name. So if a state has an object named eye_r, and the next state also has an object named eye_r, all object properties will be smoothly transitioned. You can control the duration and curve of the transition in the State Inspector.

For objects that are present in one state but not in another, Lark will smoothly fade and/or scale them in. You can control this behavior by clicking on an object, then scrolling down to the APPEAR and DISAPPEAR properties. You can choose from several transition types, curve, and duration.

Note that keyframe animations for both the incoming and outgoing state will continue playing during state transitions. When setup properly, this results in smooth, seamless transitions regardless of where the playhead is when the transition starts. It's helpful to frequently check how all state transitions look by clicking between the states while playing.

Objects

Add an object

Add an object by first selecting a state, then click the plus button in the Objects list, then select an Object type.

Delete an object

Delete an object by right clicking on it, then click "Delete".

Duplicate an object

Duplicate an object by right clicking on it, then click "Duplicate".

Flip an object horizontally or vertically

Flip an object by right clicking on it, then click "Flip horizontally" or "Flip vertically".

Resize an object

Resize an object by single clicking on it in the canvas, then drag the handles. Hold shift while dragging to preserve aspect ratio.

Edit an object's path

Edit an object's path by double clicking on it in the canvas. You can edit endpoints and control points with a similar workflow to Figma, etc. Delete points by selecting a point, then tapping the delete key.

Object properties

Opacity

The object's opacity (0-1).

Color

The object's color (hex or RGB). Due to microcontroller resource constraints, Lark uses a compact color format called RGB565. Colors might not map perfectly onto other software.

Frame

The object's frame in the canvas. (0,0) is at the top left and (240, 135) is at the bottom right.

Scale

The object's scale (W, H from 0-1).

Translation

The object's translation. You can set this property in the object inspector, but it's much more helpful for keyframe animations.

Rotation

The object's rotation. ANCHOR X and ANCHOR Y are in object unit points – (0,0) is the top left of the object and (1,1) is the bottom right. ANGLE is in radians.

Transform 3D

The object's 3D transform. Lark's graphics engine is pseudo-3D, meaning objects can be efficiently rotated in 3D space.

ANCHOR X and ANCHOR Y are in object unit points – (0,0) is the top left of the object and (1,1) is the bottom right.

PIVOT X and PIVOT Y control the "strength" of rotation about the X and Y axes. For a full rotation about the X axis, set PIVOT X to 1.0 and PIVOT Y to 0.0 (and vice versa for a full rotation about the Y axis).

ANGLE is in radians.

Appear

This controls the object's appearance transition. It's only applicable when transitioning from a state that doesn't contain an object with the same name.

Disappear

This controls the object's disappearance transition. It's only applicable when transitioning to a state that doesn't contain an object with the same name.

Keyframes

Add, delete, and edit keyframes

Keyframes can be edited using the object inspector on the right side of the screen. The workflow is similar to Blender.

To add a keyframe, first select an object, then click the keyframe add button next to the property you want to animate.

Move the playhead to the desired time by clicking and dragging in the timeline, then click the keyframe add button again to add a keyframe at the current time. You can also just move the playhead, then edit the object property to automatically add a keyframe or edit an existing keyframe if one exists at that timestamp.

To edit the timestamp or curve of a keyframe, click the keyframe in the timeline, then edit the timestamp or curve in the inspector on the right side of the screen.

Copy keyframes to other objects

A set of keyframes for an object property can easily be copied to another object by right clicking on the property in the list, then clicking "Copy to...".

Undo / redo

Lark supports undo / redo using standard macOS keyboard shortcuts (⌘Z and ⌘⇧Z).

Opening & saving

.lark files can be opened and saved using the buttons in the top right corner. You'll get a popup before closing to remind you to save your work. A .lark file contains the entire scene – all states, objects, and keyframes.

Uploading to dev board

Once you setup your states, you can upload everything to the dev board by clicking "Upload to..." in the upper right corner of the screen. After uploading, your device will reset.

State sync

When connected to your computer, you can directly preview state transitions by clicking different states in the list. You can also preview different look directions by dragging the dot in the LOOK control under the canvas.

Running little guy on battery

When connected to battery power, little guy will randomly transition through all states you made in Lark. He'll also randomly look around in different directions.