Skip to content

Commit 3e3ad8f

Browse files
marklundinmarklundin
authored
Seperates Blocks home pages (#147)
1 parent ebaa4da commit 3e3ad8f

File tree

9 files changed

+240
-43
lines changed

9 files changed

+240
-43
lines changed

‎packages/blocks/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ A set of beautifully crafted high-level 3D primitives for React, built on @playc
88
npm install @playcanvas/blocks playcanvas
99
```
1010

11-
Follow this guide to [Install Tailwind](https://tailwindcss.com/docs/installation)
11+
Follow this guide to [Install Tailwind v4](https://tailwindcss.com/docs/installation)
1212

1313
And add the following top your css
1414

‎packages/blocks/src/splat-viewer/utils/style.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export default {
5858
},
5959
vignette: {
6060
enabled: true,
61-
intensity: 0.4,
61+
intensity: 0.6,
6262
inner: 0.25,
6363
outer: 1.52,
6464
curvature: 0.78

‎packages/docs/components/Check.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Check as CheckIcon, Minus as MinusIcon } from 'lucide-react'
1+
import { Check as CheckIcon, Minus as MinusIcon, Box as BoxIcon } from 'lucide-react'
22

33
export function Check({ children }: { children: React.ReactNode }) {
44
return (
@@ -11,6 +11,17 @@ export function Check({ children }: { children: React.ReactNode }) {
1111
)
1212
}
1313

14+
export function Block({ children }: { children: React.ReactNode }) {
15+
return (
16+
<div className="flex gap-4 items-center justify-center ">
17+
<div className="bg-muted rounded-full p-1 w-6 h-6 flex items-center justify-center">
18+
<BoxIcon className='text-muted-foreground'/>
19+
</div>
20+
<span>{ children }</span>
21+
</div>
22+
)
23+
}
24+
1425
export function Dash({ children }: { children: React.ReactNode }) {
1526
return (
1627
<div className="flex gap-4 items-center justify-center ">

‎packages/docs/content/blocks/getting-started.mdx

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { Tabs, Card, Code, Bleed, Steps } from 'nextra/components'
2+
import { ArrowRight, Hexagon, Box } from 'lucide-react'
3+
import { Button } from '@components/ui/button'
4+
5+
# Getting Started
6+
7+
**Blocks** can be installed in any React project with **Tailwind v4**. You can use them with **Next.js**, **Vite**, or any other React framework.
8+
9+
You can install them via NPM or shadcn's CLI.
10+
11+
## Shadcn
12+
13+
The recommended way to install Blocks is using Shadcn's CLI. Each Block can be installed individually which will add the block to your project.
14+
15+
```bash copy
16+
npx shadcn@latest add https://playcanvas-react.vercel.app/r/splat-viewer.json
17+
```
18+
19+
## Package Manager
20+
21+
Alternatively, you can simply install the package from npm, yarn, pnpm or bun and import the components you need.
22+
23+
<Steps>
24+
25+
### Install
26+
27+
Grab the package from npm, yarn, pnpm or bun.
28+
29+
<Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
30+
<Tabs.Tab value="npm">
31+
```bash copy
32+
npm i @playcanvas/blocks
33+
```
34+
</Tabs.Tab>
35+
<Tabs.Tab value="yarn">
36+
```bash copy
37+
yarn add @playcanvas/blocks
38+
```
39+
</Tabs.Tab>
40+
<Tabs.Tab value="pnpm">
41+
```bash copy
42+
pnpm add @playcanvas/blocks
43+
```
44+
</Tabs.Tab>
45+
<Tabs.Tab value="bun">
46+
```bash copy
47+
bun add @playcanvas/blocks
48+
```
49+
</Tabs.Tab>
50+
</Tabs>
51+
52+
### Add Tailwind CSS
53+
54+
PlayCanvas Blocks are built with Tailwind v4. You'll need to install Tailwind to get started.
55+
56+
Follow the official [Tailwind CSS installation guide](https://tailwindcss.com/docs/installation) for your project.
57+
58+
<Tabs items={['npm', 'yarn', 'pnpm', 'bun']}>
59+
<Tabs.Tab value="npm">
60+
```bash copy
61+
npm i tailwindcss
62+
```
63+
</Tabs.Tab>
64+
<Tabs.Tab value="yarn">
65+
```bash copy
66+
yarn add tailwindcss
67+
```
68+
</Tabs.Tab>
69+
<Tabs.Tab value="pnpm">
70+
```bash copy
71+
pnpm add tailwindcss
72+
```
73+
</Tabs.Tab>
74+
<Tabs.Tab value="bun">
75+
```bash copy
76+
bun add tailwindcss
77+
```
78+
</Tabs.Tab>
79+
</Tabs>
80+
81+
### Configure Tailwind
82+
83+
Add the following to your **index.css** file. This ensures that the block is processed by Tailwind.
84+
85+
```css copy filename=src/index.css
86+
@source '../node_modules/@playcanvas/blocks';
87+
```
88+
89+
</Steps>

‎packages/docs/content/blocks/index.mdx

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
---
2+
title: Blocks
3+
description: Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.
4+
openGraph:
5+
title: playcanvas/react docs - Blocks
6+
description: Documentation for @playcanvas/react
7+
images:
8+
- url: https://playcanvas-react.vercel.app/blocks.png
9+
width: 1536
10+
height: 1024
11+
---
12+
import { Tabs, Code, Bleed, Steps } from 'nextra/components'
13+
import { ArrowRight, Hexagon, Box } from 'lucide-react'
14+
import { Button } from '@components/ui/button'
15+
import { Check, Block } from '@components/Check'
16+
import registry from '../../registry.json'
17+
18+
export const splatUrl = process.env.NEXT_PUBLIC_BLOCKS_SPLAT
19+
export const splatVersion = registry.items.find(item => item.name === 'splat-viewer')?.meta?.version
20+
21+
<h1 className='text-4xl font-bold mt-8 mb-2'>
22+
Blocks for 3D <Badge variant="secondary" >new</Badge>
23+
</h1>
24+
25+
<div className='text-lg font-semibold text-muted-foreground max-w-prose'>
26+
High-level 3D primitives for React — minimal setup and beautiful by default.
27+
</div>
28+
29+
PlayCanvas Blocks are high-level component primitives for React. Clean, simple, and beautiful by default, they're designed to drop into your project and get to work. Built around **@playcanvas/react** and **@shadcn/ui** they're composable, themeable and ready to use out of the box.
30+
31+
<div className='flex flex-row gap-2 mt-4 items-center'>
32+
<a className="flex items-center -ml-2 flex-row gap-2 bg-muted rounded-full p-2 px-4 max-w-fit" href="./getting-started">
33+
<Box size={14} className="text-muted-foreground" />
34+
<div className="text-xs font-medium text-muted-foreground hover:text-foreground transition-colors duration-200">Get Started</div>
35+
<ArrowRight size={14} className="text-muted-foreground" />
36+
</a>
37+
<a href="./splat-viewer">
38+
<Button variant="link" className='cursor-pointer text-muted-foreground text-xs hover:text-foreground transition-colors duration-200'>
39+
Browse Blocks
40+
</Button>
41+
</a>
42+
</div>
43+
44+
<div className='relative mb-12'>
45+
<Viewer.Splat src={splatUrl} className="aspect-4:1 my-8 -mx-6 bg-gray-200 rounded-lg shadow-xl cursor-grab active:cursor-grabbing" />
46+
<div className='absolute bottom-0 right-0 w-full flex flex-col items-center py-8 text-background text-xs'>
47+
_Rendered with the <code>Viewer.Splat</code> component — a React block for Gaussian splats._
48+
<a className="hover:underline" href="/blocks/splat-viewer">
49+
_Learn more →_
50+
</a>
51+
</div>
52+
</div>
53+
54+
## Features
55+
<div className="flex flex-col gap-4 py-4 items-start">
56+
<Check>
57+
<div className="flex flex-col">
58+
<span className="font-bold">Composable</span>
59+
<span className="text-muted-foreground text-sm">Blocks are flexible — arrange components in any order.</span>
60+
</div>
61+
</Check>
62+
<Check>
63+
<div className="flex flex-col">
64+
<span className="font-bold">Themeable</span>
65+
<span className="text-muted-foreground text-sm">Beautiful by default, but easily customizable.</span>
66+
</div>
67+
</Check>
68+
<Check>
69+
<div className="flex flex-col">
70+
<span className="font-bold">AI Ready</span>
71+
<span className="text-muted-foreground text-sm">AI rules.mdc files for each block.</span>
72+
</div>
73+
</Check>
74+
<Check>
75+
<div className="flex flex-col">
76+
<span className="font-bold">Open Source</span>
77+
<span className="text-muted-foreground text-sm">Blocks are open source and free to use forever.</span>
78+
</div>
79+
</Check>
80+
<Check>
81+
<div className="flex flex-col">
82+
<span className="font-bold">PlayCanvas Powered</span>
83+
<span className="text-muted-foreground text-sm">Built on a robust engine trusted in real-world 3D apps.</span>
84+
</div>
85+
</Check>
86+
</div>
87+
88+
## How it works?
89+
90+
Built on @playcanvas/react and the PlayCanvas engine, Blocks abstract the underlying engine to provide a high-level component API that's easy to use and understand. Internally, each block maps to a PlayCanvas entity and component hierarchy, giving you full control with a familiar dev experience.
91+
92+
## Featured blocks
93+
94+
We've got a few blocks already in development. Stay tuned for updates!
95+
96+
<div className="flex flex-col gap-4 py-8 items-start">
97+
98+
<Block>
99+
<div className="flex flex-col">
100+
<span className="font-bold">Splat Viewer</span>
101+
<span className="text-muted-foreground text-sm">A simple media block that presents a Gaussian Splat (3DGS) point cloud.</span>
102+
<a href="/blocks/splat-viewer" className='cursor-pointer text-muted-foreground text-xs hover:text-foreground transition-colors duration-200'>
103+
Learn more →
104+
</a>
105+
</div>
106+
</Block>
107+
</div>
108+
109+
_More blocks coming soon..._
110+
111+
## AI Ready
112+
113+
Every block comes with MDC rules for autocompletion, documentation, and AI integration — ready for use in tools like Cursor or Windsurf. To install rules for Playcanvas Blocks run the following command.
114+
115+
```bash copy
116+
npx shadcn@latest add https://playcanvas-react.vercel.app/r/blocks.json
117+
```
118+
119+
This installs the rules for the registry and for @playcanvas/react and add them to your project.
120+
121+

‎packages/docs/content/blocks.mdx renamed to ‎packages/docs/content/blocks/splat-viewer.mdx

Lines changed: 8 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,10 @@
1-
---
2-
title: Blocks
3-
description: Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.
4-
asIndexPage: true
5-
openGraph:
6-
title: playcanvas/react docs - Blocks
7-
description: Documentation for @playcanvas/react
8-
images:
9-
- url: https://playcanvas-react.vercel.app/blocks.png
10-
width: 1536
11-
height: 1024
12-
---
131
import { Tabs, Card, Code, Bleed, Steps } from 'nextra/components'
142
import { ArrowRight, Hexagon, Box } from 'lucide-react'
15-
import registry from '../registry.json'
3+
import registry from '../../registry.json'
164

175
export const splatUrl = process.env.NEXT_PUBLIC_SAMPLE_SPLAT
186
export const splatVersion = registry.items.find(item => item.name === 'splat-viewer')?.meta?.version
197

20-
<a className="flex items-center mb-8 mt-4 -ml-2 flex-row gap-2 bg-muted rounded-full p-2 px-4 max-w-fit" href="/docs/guide/getting-started">
21-
<Box size={14} className="text-muted-foreground" />
22-
<div className="text-xs font-medium text-muted-foreground">Build your first scene in minutes</div>
23-
<ArrowRight size={14} className="text-muted-foreground" />
24-
</a>
25-
# Building Blocks for 3D <Badge variant="secondary" className="-mt-2">new</Badge>
26-
27-
A set of high-level crafted 3D primitives for React, built on top of @playcanvas/react and @shadcn/ui — interactive viewers, spatial layouts, and controls — designed to help you compose immersive scenes with minimal setup.
28-
29-
{/* ## AI Assisted Development
30-
31-
Each block comes with it's own set of MDC rules which are used to generate the block. To install rules for the registry run the following command in your terminal.
32-
33-
```bash copy
34-
npx shadcn@latest add https://playcanvas-react.vercel.app/r/3d-blocks.json
35-
```
36-
37-
This will install the rules for the registry and for @playcanvas/react and add them to your project. */}
38-
398
## Splat Viewer <Badge variant="secondary" className="-mt-2">beta</Badge>
409

4110
A responsive and composable component for displaying **Gaussian splats**.
@@ -46,7 +15,7 @@ Supports large assets with lazy loading and automatic framing. Use it in modals,
4615
Supports compressed gaussian splats.
4716

4817
<div className="lg:outline lg:p-28 -mx-4 lg:-mx-6 mt-12 mb-0 rounded-t-lg bg-linear-to-br from-indigo-500 to-purple-600 relative">
49-
{/* <OpenInV0Button url="https://v0.dev/chat/api/open?url=https://playcanvas-react.vercel.app/r/splat-viewer.json" className="absolute top-4 right-4" /> */}
18+
<OpenInV0Button url="https://v0.dev/chat/api/open?url=https://playcanvas-react.vercel.app/r/splat-viewer.json" className="absolute top-4 right-4" />
5019
<Viewer.Splat src={splatUrl} className="aspect-2.39:1 bg-purple-200 rounded-t-lg lg:rounded-lg shadow-xl cursor-grab active:cursor-grabbing" >
5120
<Viewer.Controls autoHide >
5221
<div className="flex gap-1 flex-grow">
@@ -138,6 +107,12 @@ Install the component from your command line.
138107
npx shadcn@latest add https://playcanvas-react.vercel.app/r/splat-viewer.json
139108
```
140109

110+
Ensure the block is processed by Tailwind by adding the following to your `index.css`.
111+
112+
```css
113+
@source "../node_modules/@playcanvas/blocks";
114+
```
115+
141116
### Anatomy
142117

143118
Import all parts and piece them together.

‎packages/docs/content/docs/index.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { Icons } from '@docs-components/Icons'
1414
import { Terminal, ArrowRight, Hexagon, Box, Codesandbox } from 'lucide-react'
1515
import Example from '@templates/HomePageExample'
1616

17-
<h1 className='text-4xl font-bold mt-8 mb-2'>
17+
<h1 className='text-4xl font-bold mt-8 mb-4'>
1818
Playcanvas React
1919
</h1>
2020

‎packages/docs/registry.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"homepage": "https://playcanvas-react.vercel.app/blocks",
55
"items": [
66
{
7-
"name": "3d-blocks",
7+
"name": "blocks",
88
"title": "3D Blocks",
99
"description": "A collection of 3D blocks for PlayCanvas.",
1010
"type": "registry:style",
@@ -31,13 +31,14 @@
3131
"type": "registry:block",
3232
"author": "Mark Lundin",
3333
"category": ["3d", "viewer", "asset", "webgl"],
34-
"homepage": "https://playcanvas-react.vercel.app/blocks#splat-viewer",
35-
"docs": "https://playcanvas-react.vercel.app/blocks#splat-viewer",
34+
"homepage": "https://playcanvas-react.vercel.app/blocks/splat-viewer",
35+
"docs": "https://playcanvas-react.vercel.app/blocks/splat-viewer",
3636
"meta": {
3737
"version": "0.1.0.beta.1"
3838
},
3939
"dependencies": [
4040
"@playcanvas/blocks",
41+
"@playcanvas/react",
4142
"playcanvas"
4243
],
4344
"files": [

‎packages/docs/registry/splat-viewer.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Viewer } from "@playcanvas/blocks"
22

3-
const splatUrl = "https://playcanvas.com/models/splat/splat.splat"
3+
const splatUrl = "https://d28zzqy0iyovbz.cloudfront.net/30b943d5/scene.compressed.ply"
44

55
export function SplatViewer() {
66
return (
7-
<Viewer.Splat src={splatUrl} autoPlay className="rounded-t-lg lg:rounded-lg shadow-xl cursor-grab active:cursor-grabbing" >
8-
<Viewer.Controls autoHide >
7+
<Viewer.Splat src={splatUrl} className="rounded-lg shadow-xl cursor-grab active:cursor-grabbing" >
8+
<Viewer.Controls >
99
<div className="flex gap-1 pointer-events-auto flex-grow">
1010
<Viewer.FullScreenButton />
1111
<Viewer.DownloadButton />

0 commit comments

Comments
 (0)