Build with visual tools.
Follow the Spline + Framer route, from importing the model to placing the scene on your page. The coded starter is optional.
THE 3D WEBSITE SYSTEM / VORTEX WEBSITES
Build premium websites.
Learn to sell the work.
A visual Spline + Framer workflow, reusable files and a practical guide
to scoping, pricing and pitching client projects.
51-page ebook Guided companion kit $74 USD once
THE BUILD, BROKEN DOWN
Skip to the guide Every detail has a job.
ARC STUDIO / A FICTIONAL PRODUCT CONCEPT
arc®OBJECTS FOR A QUIETER SPACE
01 / THE CIRCULAR LIGHTA little light.
A little light.
A different
feeling.
Thoughtful form. A softer atmosphere.
Meet the project inside the guide.
ARC / 001FORM. LIGHT. INTERACTION.
Give the product room to be seen. One object, one visual focus.
INTERACTIVE LAYOUT DEMO / STATIC LAMP RENDERTHE PART THAT COMES AFTER THE RENDER
The build is only
half the business.
You still need to quote it, pitch it and deliver it.
This guide takes the same project all the way through.
01 Build the page02 Price the scope03 Pitch + deliver
51pages to work through
14pages to get you started
01complete practice project
$5Kworked project scope*
*A planning example in USD, not a guaranteed fee, typical result or verified client sale.
WHAT YOU WILL LEARN
The skills.
And where to use them.
Short lessons. Actual files. One project to follow.
Get the ebook + kit Written guide and companion files. No video course.01
Follow a repeatable workflow.
Know which file to open, what to change and what to check. Go from an extracted kit to a finished practice project.
Put AI to work on specific tasks.
Use four prompts for visual direction, implementation, review and proposal drafts. Learn how to check the output.
Learn to package premium client work.
Explore a worked US$5,000 scope, price the deliverables and prepare outreach, proposals and a clear handoff.
The US$5,000 scope is a teaching example, not a customer result or a guaranteed fee.
SEE WHAT IS ACTUALLY INSIDE
Open the work.
Judge it for yourself.
Real pages and tools from this product.
No mystery download behind the buy button.
01 / THE PRACTICE BUILDARC
A page you can start from.
The supplied starter, shown in its static poster state. ARC is a fictional learning project, not a client result.
Explore the build demonstration02 / YOUR WORKSHEET DESKINCLUDED
Open. Edit. Save.
A browser-based worksheet editor, with instructions and completed practice examples.
03 / THE COST CHECKINCLUDED
Understand the number.
Change your hours, costs and proposed fee. Check the assumptions before writing a quote.
These previews show the materials included, not verified customer earnings. The starter's live 3D path and platform integrations still need testing on your target devices.
OPEN IT BEFORE YOU BUY IT
Less guessing.
Actual pages.
Read six pages from the expanded edition,
including the new companion-kit walkthrough.
THE GUIDE + THE STARTING POINTS
Read it.
Then make it yours.
Written walkthroughs, reusable assets
and files you can actually edit.
VOL. 0151 PAGES
01 / THE FIELD GUIDE
The decisions behind the build.
Start with 14 pages of companion-kit guidance, then follow the ARC concept from its brief to a scene, page, quote and handoff.
index.htmlstyles.cssscene.js
01 <section class="product-hero">
02 <h1>A little light.</h1>
03 <p>A different mood.</p>
04 <div class="scene">
05 <!-- Start with the poster. -->
06 <!-- Add 3D when it helps. -->
07 </div>
08 </section>.glb modelPoster imageHTML / CSS / JS
02 / THE BUILD FILES
Something to start from.
The original lamp model, poster and website starter. Use the visual workflow or explore the optional code route.
PROJECT / ARCCLIENT SCOPE
Clarity beforethe first invoice.
Deliverables
Revisions
Milestones
SCOPE → PRICE → DELIVER
03 / THE BUSINESS TOOLS
The work around the work.
A local worksheet editor, completed practice examples, cost calculator, handoff tools and four prompts to adapt.
CHOOSE YOUR ROUTESpline + FramerORHTML / CSS + Three.jsIndependent guide.
Software and hosting are separate.
Software and hosting are separate.
INSIDE THE EBOOK
One project.
All the way through.
A new getting-started section, then six chapters.
Learn the files first. Build the project.
Put a scope behind it.
Not a video course or coaching programme.
00Use your companion kitKnow what to open first.04-17
Unzip the files, choose your build route and use the browser worksheet editor. Work through real filenames, filled examples, calculator inputs and a chapter-to-file map.
YOUR OUTPUT A working folder and your first completed steps01The offerGive the 3D a purpose.18-20
Decide what the page needs to explain, define the ARC brief and break down the hero into a message, an action and space for the object.
YOUR OUTPUT A focused practice brief02BuildFrom first scene to phone screen.21-30
Choose a visual or code route. Import the model, set up the scene, add an interaction, build the page and check mobile, fallbacks and performance.
YOUR OUTPUT A product-page practice build03PriceKnow what belongs in the quote.31-34
Review packages and an illustrative USD $5,000 scope. Estimate time and project costs, allow for uncertainty and see what extra revisions do to the numbers.
YOUR OUTPUT A bounded scope and cost check04Find clientsShow the work. Start a useful conversation.35-39
Present practice work honestly, identify relevant prospects, write a specific outreach message, run discovery and prepare a proposal a client can read.
YOUR OUTPUT An outreach plan and proposal05DeliverMake the final handoff clear.40-42
Agree on feedback, record changes, check the launch and package the agreed files. Follow a practice sprint to repeat the process before you pitch it.
YOUR OUTPUT A delivery and handoff checklist06Reusable toolsKeep the useful starting points.43-51
Use prompts for design, implementation, QA and proposals. Review asset permissions, work through common issues and adapt the worksheets to your project.
YOUR OUTPUT A repeatable working folderWHAT MAKES THE WORK EASIER TO EXPLAIN
The tools are a start.
The process is the skill.
Practise the decisions around the effect, not just the effect itself.
A nice animation.
Then what?
- A scene without a clear page goal
- A desktop layout with no mobile plan
- A quote without defined deliverables
- Revisions with no agreed finish line
A considered page.
A defined project.
- A readable message and useful interaction
- A responsive layout and static fallback
- A cost estimate and written scope
- Review points, checks and a clear handoff
The book includes an illustrative US$5,000 project scope to make the pricing discussion concrete. It does not promise a particular fee or client outcome.
THE COMPLETE SYSTEM
Your next project
starts here.
A guide to work through. Files to build on.
A plan for the conversation after the build.
A GOOD FIT FOR
Visual builders who want a guided starting point for 3D pages, and designers ready to practise scoping and pitching the work. Basic layout skills still help.
EBOOK + COMPANION KITEXPANDED
The 3D Website System
$74USD
One-time purchase
One-time purchase
The guide, the project assets and the client-work toolkit.
- 51-page PDF field guide
- 14-page companion-kit getting-started guide
- Written Spline + Framer build guide
- Original 3D model + poster image
- HTML / CSS / JavaScript starter
- Worked $5,000 project scope
- Browser-based worksheet editor + examples
- Outreach, proposal + handoff worksheets
- Cost calculator + four reusable AI prompts
Software, domains and hosting are separate. No video lessons, coaching, community or income guarantee.
Checkout is not connected yet. No payments can be taken.
BEFORE YOU START
Good
questions.
What is included,
and what is not.
Is this an ebook or a video course?
It is a 51-page PDF ebook with a companion file kit. You get written walkthroughs, the model and poster, a website starter, business worksheets, a calculator and four prompts. There are no video lessons, community access or coaching.
Will I know how to use the companion kit?
Yes. The new getting-started section covers extracting the ZIP, choosing a visual or code route, opening the files, saving worksheets and checking your first build. The kit includes a local start page, worksheet editor and completed ARC practice examples. The ebook maps each file to its chapter.
Do I need to know how to code?
The Spline + Framer route uses visual tools, but assumes basic comfort with page layouts and responsive design. The optional HTML/CSS/Three.js route involves editing source files; basic JavaScript helps. The guide includes a GLB asset, not native Spline or Framer projects.
Will this get me $5,000 clients?
No client, fee or income is guaranteed. The book includes an illustrative USD $5,000 scope to explain deliverables and costs. What you can sell depends on your work, the buyer, the project and your sales process. ARC is a fictional practice project.
Do I need to pay for other software?
Your chosen software accounts, hosting, domain and third-party services are separate. Check the features and plans needed for the route you choose before committing to a client quote. This is an independent guide, not a product from Spline, Framer or Three.js.
Is the starter ready to ship to a client?
Use it as learning source material. Its static layout and fallback were checked, but the optional viewer still needs a successful live WebGL test on a supported device. Review, customise and test the complete project before client use. Reuse is subject to the buyer licence and third-party terms.
How do delivery, support and purchase terms work?
You are buying the PDF and companion kit, not the seller's editable ebook masters. The buy buttons take you directly to the checkout for this product, with no cart step. Review delivery, support, refund and licence details there before purchase. Checkout is not connected yet, so no payment can be taken.
ONE PRODUCT. ONE-TIME PURCHASE.
A guide to keep.
Files to work through.
The expanded ebook and companion kit, together for $74 USD. Learn at your own pace and use the practice files alongside the chapters.
Get the complete kit
Software and hosting are separate.
No ongoing subscription is included in this offer.
FROM FIRST SCENE TO CLIENT HANDOFF
Make the work.
Know how to offer it.
Start with one project. Understand every step.
Get the 3D Website System