FNJ

Motion designer portfolio website

A motion design portfolio that starts with the reel

Motion work has to move on the page. FNJ's builder designs a motion portfolio that opens on your reel, then breaks out projects with looping clips, style frames and credits. Your clips play from video files you host, and the design around them is built from a reference you love.

Start your siteSee the sample site
Sample site with fictional names, made to show the kind of site the builder designs. Yours is designed from your description and the reference you choose.

The same sample at phone width. The builder designs every page at desktop, tablet and phone widths.

The sample, section by section

What a motion designer website needs

The sections the builder can design for you, and the job each one does. The starter prompt asks for these; add or drop any of them in your own words.

  1. 01

    Reel

    Your best minute, front and centre.

  2. 02

    Projects

    Looping previews with client and role.

  3. 03

    Project pages

    Final film, style frames and credits.

  4. 04

    Tools

    After Effects, Cinema 4D, Blender: what you work in.

  5. 05

    Contact

    Availability and email.

Sample photography from Unsplash by venmer, simonppt, steve_j and alexshuperart.

Made for motion designers, not for everyone

Starter prompt

A prompt written for motion designers

It opens in the builder ready to edit. Replace the words in brackets with your own details, change anything else you like, then add a reference.

Reference to add

A motion studio's or animator's site whose energy and grid you want.

The builder takes a reference's look (layout, type, palette, spacing), never its words or images.

Use this prompt
Build a motion designer portfolio for [your name], a motion designer working in [2D / 3D / both]. Open with a full-width showreel video and my name. Add a projects grid with eight projects, each with a muted looping preview clip, client and role, and a page per project with the final film, style frames, a short process note and credits. Add a tools section and a contact section with my availability. Dark, cinematic and kinetic: a bold grotesque, bright accent colour and tight grid.

How it works

  1. 01

    Describe your motion designer site

    Open the builder with the starter prompt, fill in your details and add a screenshot or link of a site you'd like yours to look like. A reference is required: it's what makes the design yours rather than a template.

  2. 02

    Watch it design every page

    The builder plans the pages, palette and type, then builds each page section by section on a canvas at desktop, tablet and phone widths while you watch.

  3. 03

    Refine it, then take the code

    Ask for changes in plain words or edit by hand, upload your own work, then download a Next.js project or static HTML, or push it to your GitHub, and host it where you like.

What it costs: From $25/month, or $29 once for 50 credits that never expire. No FNJ hosting fee: you host the exported site. See plans

Motion designers: questions

Can I embed my reel from Vimeo or YouTube?
The builder's video block plays video files (such as an MP4) from a link you host. Embeds from video platforms aren't included; add a button that links to them.
Will looping clips slow down the page?
Give each clip a poster image and keep the files short; the video block supports muted autoplay and looping, and the poster shows until it plays.
Can I show style frames next to the final film?
Yes. Ask for style frames on each project page and upload them as images in a grid beside the video.
Can I add credits for each project?
Yes. The builder writes a credits block you edit: director, studio, sound and your role.

Related portfolio builders

More for designers

Put your reel where it belongs

The builder opens with your motion designer prompt filled in. You edit it, add a reference, and watch the first version take shape.

Start your siteAbout the AI builder