Designing animations and pictures

This page is for people making their own profile art: what Maplecord accepts, the limits, and how to design so it looks right. To put the finished file on your profile, see Customising your profile.

What can move on a profile

What	File	Limit
Profile picture	PNG, JPEG or WebP, or an animated GIF	2 MB
Banner	PNG, JPEG or WebP, or an animated GIF	4 MB
Decoration around your picture	Lottie (.json or .lottie)	50 KB
Profile effect, played over your profile card	Lottie (.json or .lottie)	100 KB

You can also wear one of the decorations and effects Maplecord offers, and change their colours. Your own uploads keep the colours you made them with.

Pictures and banners

• A still picture is made a sensible size by the app before it is uploaded. A profile picture becomes a 256 × 256 square and a banner becomes 900 × 300, both cut from the middle of what you chose. A picture already that small is sent as it is.
• An animated GIF is sent exactly as you made it, so for GIFs the size limits above are the ones to watch. Make a GIF for a profile picture square, and one for a banner three times as wide as it is tall.
• To animate, use a GIF. An animated WebP larger than those sizes is redrawn as a still picture.
• Profile picture. It is shown as a circle. Keep anything important away from the corners. It appears as small as 32 pixels in lists, so simple shapes read best.
• Banner. On a profile card the banner is a strip 300 wide and 96 tall, and the picture fills it with the overhang cut off, so a little of the top and bottom of a 900 × 300 banner is not seen there. Keep the subject in the middle. Your profile picture overlaps the bottom left of the banner.
• File type. The server decides what a file is from its contents, not its name. Anything that is not PNG, JPEG, GIF or WebP is refused.

Lottie animations: the rules

Decorations and effects are Lottie files, the format After Effects (with the Bodymovin plug-in), LottieFiles and similar tools export. Everyone who sees you has their app draw your file, so it is held to what is light and safe to draw.

• Format: .json, or .lottie (the same animation packed small). If a .lottie holds several animations, the first one is used.
• Size: a decoration up to 50 KB as uploaded, an effect up to 100 KB. Inside a .lottie, the animation may be up to 100 KB once unpacked for a decoration and 512 KB for an effect. A decoration is held tighter because it is on every picture of you in a list.
• Speed and length: 1 to 60 frames a second, and up to 30 seconds before it repeats. It loops.
• Drawn shapes only. Shape layers, solid colour layers, null layers and precompositions are fine. Pictures, text and fonts, sound and video are refused.
• No expressions. An animation that runs script is refused.
• Not too heavy: at most 100 layers counting the ones inside precompositions, and a repeater may make at most 40 copies.
• What it draws at once: every layer and every shape is counted, a repeated shape once for each copy and a precomposition once for each layer that uses it. A decoration may draw up to 250 and an effect up to 600. A file over that is refused and told its count.
• Canvas: between 16 and 4096 on each side. It is drawn to fit, so the shape matters, not the pixel count.

If a file is refused, the app tells you which rule it broke.

Before exporting, convert text to shapes, replace any picture with drawn shapes, and bake or remove expressions.

Decoration around your picture

• It has to be square, 200 × 200 for example.
• Your picture fills the middle 80% of the square. The decoration is drawn 1.25 times the size of your picture and centred on it. On a 200 × 200 canvas your picture is a circle 160 across in the centre, which leaves a ring 20 wide around it.
• Draw in that outer ring. Anything in the middle sits on top of your face.
• Keep it readable small. In chat and member lists the whole square is about 40 pixels across. Thin lines and small details disappear; a few bold shapes work.
• In lists a decoration only moves while the pointer is on it, and otherwise shows its first frame. Make the first frame look good on its own. On a profile it always moves.

Profile effect

An effect plays in front of the whole profile card, so it must not hide the person wearing it.

• Shape: the shape of a profile card, 300 × 420 or larger in the same proportion (5 by 7). A file of another shape can be used by ticking Fill and crop: it fills the card and what does not fit is cut off.
• No background. If it paints over more than 70% of the card for a quarter of a second or longer, it counts as a background and is refused. Leave the canvas transparent.
• It may hide at most 35% of the card at any one moment.
• Nothing may park over the picture and the name. Things can pass over the middle of the card, but no spot there may stay covered for more than half a second. On a 300 × 420 canvas that protected band runs from 40 to 200 down from the top, nearly the full width.
• A card is as tall as what is written on it, and the effect is cropped to fit. Keep the important motion in the upper part and towards the edges.

Falling or drifting particles, sparkles at the edges, and things that cross the card and leave all pass. A frame that sits around the picture, a wash of colour, or a logo in the middle do not.

The app checks these three coverage rules itself before uploading, by drawing your file on a card, and says which one failed and by how much.

Getting under the size limit

• Export as .lottie where your tool offers it; it is the same animation, packed.
• Use fewer keyframes and let easing do the work.
• Simplify paths: fewer points per shape.
• Reuse one precomposition several times rather than copying layers.
• Shorten the loop. Two or three seconds that repeat cleanly are usually enough.

People who prefer less motion

If someone's device is set to reduce motion, their app shows the first frame of every decoration and effect and does not play them.