workflowstacks
ai-agent

Iphone

Recreate the Apple iPhone 15 Pro website, combining GSAP animations and Three.js 3D effects. From custom animations to animated 3D models, this tutorial covers it all.
1,645 stars315 forksJavaScriptUpdated 7/12/2024100% free · open source
What it does

Provides a ready‑to‑run codebase that reproduces the Apple iPhone 15 Pro product page with GSAP animations and Three.js 3D visual effects.

When to use it
  • •You need a high‑impact product landing page that showcases 3D product models with smooth scroll‑triggered animations.
  • •Your startup wants to demo a hardware device and needs a web‑based interactive showcase without building everything from scratch.
  • •You want a learning reference for combining GSAP timelines with Three.js scenes in a modern React/Vite setup.
Ready-to-paste prompt
npm run dev -- --port 3001   # start the dev server on a custom port to avoid conflicts
Heads up: The project requires Node >= 16 and a modern browser; Three.js will fail to load locally if you open index.html directly – always run it through the Vite dev server or a static server.
Saves to your device
Use with Claude
New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install
Claude Code
mkdir -p ~/.claude/skills/iphone && curl -fsSL https://workflowstacks.com/api/skills/iphone/claude-skill -o ~/.claude/skills/iphone/SKILL.md
Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)
claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How Iphone works
Codeflow
Free to inspect

Iphone is a small JavaScript project (~1.1k lines across 21 code files). Setup is light: install Node.js, run one command. Last commit 26 months ago, no license file, no tests found.

Size
Small codebase
~1.1k lines · 21 code files · 9 min skim
Setup
Light setup
Install Node.js, run one command.
Runs on
Node.js
No API keys detected
JavaScript 93%CSS 6%HTML 1%
Where to start reading
  1. 1
    README.md
    Start here — what it does and how to install it
  2. 2
    package.json
    Dependencies and the commands it exposes
  3. 3
    src/App.jsx
    Inside src/ — the main logic begins here
What's in each folder
src/Core code — the actual logic18 files
public/Images & static assets28 files
READMENo tests foundThin docsNo CINo licenseLast update 26 mo ago
Quick Actions
Details
Creator
adrianhajdin
Language
JavaScript
Category
ai-agent
Published
3/15/2024

Are you the creator of this tool? Claim your listing → and earn 85% of every sale.

Related skills

More ai-agent tools founders pair with this one.

ai-agent★ 276,806
Track GitHub Stars with 996.ICU
Get a popular GitHub star counter for your startup, ideal.
ai-agent★ 264,191
Superpowers
An agentic skills framework & software development methodology that works.
ai-agent★ 244,424
Linux: Open Source Kernel
Get the Linux kernel source tree for custom development, ideal for startup founders in need of a flexible OS foundation
ai-agent★ 210,750
Vue
This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
ai-agent★ 204,069
Improve Code with andrej-karpathy-skills
Get better code behavior with andrej-karpathy-skills, 165k+ GitHub stars, for founders using LLMs.
ai-agent★ 197,010
FreeDomain: Free Website Domain
Get a free domain with FreeDomain.