Portfolios · React
3D & motion designer
High-contrast dark portfolio for a 3D and motion designer, with reels, projects, rates and process.
What you get
A dark showreel-style portfolio for a 3D and motion designer: a gallery of frames, client projects, a stats band, how a job runs, day rates and a booking form. All content lives in src/site.ts.
Files
Exactly what is copied into a new project: 13 files, nothing generated.
Explorer 13
import type { Site } from "./types"; /** Everything this site shows. Edit freely. */export const site: Site = { "brand": "Kenji Arai Motion", "nav": [ { "label": "Reel", "href": "#reel" }, { "label": "Projects", "href": "#projects" }, { "label": "Rates", "href": "#rates" } ], "navCta": { "label": "Check availability", "href": "#contact" }, "sections": [ { "kind": "hero", "variant": "center", "eyebrow": "Freelance 3D & motion designer · Osaka / remote", "title": "Product films, title sequences and loops that make people stop scrolling.", "text": "I model, light and animate in Blender and Houdini, then finish in After Effects. Nine years of work for hardware makers, music labels and app teams.", "primary": { "label": "Watch the reel", "href": "#reel" }, "secondary": { "label": "Check availability", "href": "#contact" }, "visual": { "type": "tiles", "tones": [ "#3f6212", "#27272a", "#4d7c0f", "#18181b" ], "caption": "Still from 'Pressure', headphone launch film, 2026" } }, { "kind": "gallery", "id": "reel", "eyebrow": "Reel 2026", "title": "Frames from this year", "text": "Every frame here is rendered, no stock footage.", "items": [ { "title": "Pressure", "caption": "Headphone launch film, 45 s", "tone": "#365314" }, { "title": "Glasshouse", "caption": "Album visualiser, 3 min loop", "tone": "#27272a" }, { "title": "Tidal", "caption": "App onboarding animation", "tone": "#1a2e05" }, { "title": "Signal", "caption": "Conference title sequence", "tone": "#3f3f46" }, { "title": "Soft Machines", "caption": "Personal series, 30 loops", "tone": "#3f6212" } ] }, { "kind": "projects", "id": "projects", "eyebrow": "Projects", "title": "Client work", "items": [ { "title": "Pressure", "tag": "Launch film for a wireless headphone", "year": "2026", "tone": "#1a2e05" }, { "title": "Glasshouse", "tag": "Visualiser and live visuals for an album tour", "year": "2025", "tone": "#262626" }, { "title": "Signal", "tag": "Title sequence and stings for a design conference", "year": "2025", "tone": "#365314" }, { "title": "Tidal", "tag": "Onboarding and empty-state animations for a finance app", "year": "2024", "tone": "#3f3f46" } ] }, { "kind": "stats", "items": [ { "value": "9 yrs", "label": "Freelancing" }, { "value": "80+", "label": "Projects delivered" }, { "value": "4K / 60", "label": "Standard delivery" }, { "value": "48 h", "label": "Typical reply time" } ] }, { "kind": "steps", "eyebrow": "Process", "title": "How a job runs", "items": [ { "title": "Styleframes", "text": "Three to five rendered stills to agree the look before any animation starts." }, { "title": "Animatic", "text": "Rough timing to music or VO, so the edit is locked before the expensive renders." }, { "title": "Final renders", "text": "Full-resolution delivery with cutdowns for social, plus project files on request." } ] }, { "kind": "pricing", "id": "rates", "eyebrow": "Rates", "title": "Day rates and packages", "text": "Quoted in US dollars. Render costs are included up to 4K.", "plans": [ { "name": "Day rate", "price": "$850", "period": "/ day", "text": "For agencies and studios adding a 3D artist to their team.", "features": [ "Blender, Houdini, Cinema 4D", "Your pipeline or mine", "Minimum two days" ], "cta": { "label": "Book days", "href": "#contact" } }, { "name": "Product film", "price": "$9,500", "text": "A 30–60 second launch film, start to finish.", "features": [ "Styleframes and animatic", "Two rounds of revisions", "4K master plus three cutdowns", "About four weeks" ], "featured": true, "cta": { "label": "Start a film", "href": "#contact" } } ] }, { "kind": "contact", "eyebrow": "Availability", "title": "Check availability", "text": "Currently booking from late November. Send your deadline and a few references and I'll reply within 48 hours.", "fields": [ "name", "email", "company", "date", "message" ], "button": "Send brief" } ], "footer": { "text": "Kenji Arai, freelance 3D and motion designer.", "columns": [ { "title": "Watch", "links": [ "Vimeo", "Instagram", "Behance" ] }, { "title": "Contact", "links": [ "hello@kenjiarai.tv" ] } ], "legal": "© Kenji Arai Motion. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from 3D & motion designer's files. The box is already started for you: finish “Start from 3D & motion designer and …”
Dependencies
Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.
- react^19.1.0
- react-dom^19.1.0
- vite^6.3.0
- @vitejs/plugin-react^4.4.0
- tailwindcss^4.1.0
- @tailwindcss/vite^4.1.0
- typescript^5.8.0
How it runs
- Framework
- Vite + React + TypeScript
- Dev command
- npm run dev
- Build command
- npm run build
- Output directory
- dist
- Port
- 5173
- Entry route
- /
Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.
Keep browsing
All templates
Brand design studio
Bold dark site for an independent brand and identity studio, with case work, services and team.
Product designer
Case-study portfolio for a product designer, with process, experience timeline and references.
Architecture practice
Minimal, square-cornered portfolio for a small architecture practice with projects and process.
Build on 3D & motion designer
Create a free account, start from this template, and ask the AI agent to turn it into your app.