15 |
54 | );
55 | }
56 |
57 | const logos = [
58 | [
59 | {
60 | name: 'Apple',
61 | href: '/',
62 | src: '/logos/apple.svg',
63 | },
64 | {
65 | name: 'Nike',
66 | href: '/share/01JMFN4FHEYQY3CBR7B4YBZFK9?edge=0.01',
67 | src: '/logos/nike.svg',
68 | },
69 | {
70 | name: 'NASA',
71 | href: '/share/01JMFN7R2E6WV297MM6EHBCAW6?edge=0.15',
72 | src: '/logos/nasa.svg',
73 | },
74 | {
75 | name: 'Chanel',
76 | href: '/share/01JMFNF83EX5DAVWF1TP1469BW?edge=0.15',
77 | src: '/logos/chanel.svg',
78 | },
79 | {
80 | name: 'Volkswagen',
81 | href: '/share/01JMFPD47QAN0FXMWWQC8YG8SY?edge=0.01',
82 | src: '/logos/volkswagen.svg',
83 | },
84 | ],
85 | [
86 | {
87 | name: 'Vercel',
88 | href: '/share/01JMFQ1ESB52205RRGSHCXHCZG?edgeBlur=0.01',
89 | src: '/logos/vercel.svg',
90 | },
91 | {
92 | name: 'Discord',
93 | href: '/share/01JMFQS93Q6R2VRQ62HTAA2AKG',
94 | src: '/logos/discord.svg',
95 | },
96 | // {
97 | // name: 'Remix',
98 | // href: '/share/01JMFQ533G3TVC21E96RSAG4KF',
99 | // src: '/logos/remix.svg',
100 | // },
101 | {
102 | name: 'Paper',
103 | href: '/share/01JMP2MVEWNE5CZYXW94JQME35',
104 | src: '/logos/paper.svg',
105 | },
106 | ],
107 | ];
108 |
--------------------------------------------------------------------------------
/src/app/styles.css:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss';
2 | @import './utilities.css';
3 |
4 | @font-face {
5 | font-family: Matter;
6 | src: url('https://paper.design/matter.woff2');
7 | }
8 |
9 | @theme {
10 | --*: initial;
11 |
12 | --breakpoint-sm: 600px;
13 | --breakpoint-md: 1200px;
14 |
15 | --spacing: 1px;
16 | --default-font-family: Matter, sans-serif;
17 |
18 | --color-black: #000;
19 | --color-white: #fff;
20 | --color-transparent: #0000;
21 | --color-currentcolor: currentcolor;
22 | --color-blue: oklch(74% 0.104 258);
23 | --color-button: oklch(61.32% 0.148 258);
24 | --color-focus: oklch(74% 26% 258);
25 | --color-selection: oklch(78% 35% 258 / 50%);
26 |
27 | --text-sm: 16px;
28 | --text-sm--line-height: 24px;
29 | --text-sm--letter-spacing: 0.01em;
30 |
31 | --text-base: 18px;
32 | --text-base--line-height: 28px;
33 | --text-base--letter-spacing: 0.01em;
34 |
35 | --font-weight-extralight: 150;
36 | --font-weight-light: 250;
37 | --font-weight-semilight: 320;
38 | --font-weight-normal: 400;
39 | --font-weight-caption: 430;
40 | --font-weight-medium: 480;
41 | --font-weight-semibold: 550;
42 | --font-weight-bold: 670;
43 | }
44 |
45 | @layer base {
46 | :root {
47 | -moz-osx-font-smoothing: grayscale;
48 | -webkit-font-smoothing: antialiased;
49 |
50 | background-color: #000;
51 | color: white;
52 |
53 | color-scheme: dark;
54 |
55 | font-size: var(--text-base);
56 | line-height: var(--text-base--line-height);
57 | letter-spacing: var(--text-base--letter-spacing);
58 | }
59 |
60 | ::selection {
61 | background-color: var(--color-selection);
62 | }
63 |
64 | a {
65 | text-underline-offset: 4px;
66 | text-decoration-thickness: 1px;
67 | }
68 | }
69 |
70 | body {
71 | min-width: 480px;
72 | }
73 |
--------------------------------------------------------------------------------
/src/app/utilities.css:
--------------------------------------------------------------------------------
1 | @utility rounded-* {
2 | border-radius: calc(--value(integer) * 1px);
3 | }
4 |
5 | @utility rounded-* {
6 | border-radius: calc(--value(integer) * 1px);
7 | }
8 |
9 | @utility rounded-t-* {
10 | border-top-left-radius: calc(--value(integer) * 1px);
11 | border-top-right-radius: calc(--value(integer) * 1px);
12 | }
13 |
14 | @utility rounded-b-* {
15 | border-bottom-left-radius: calc(--value(integer) * 1px);
16 | border-bottom-right-radius: calc(--value(integer) * 1px);
17 | }
18 |
19 | @utility rounded-tl-* {
20 | border-top-left-radius: calc(--value(integer) * 1px);
21 | }
22 |
23 | @utility rounded-tr-* {
24 | border-top-right-radius: calc(--value(integer) * 1px);
25 | }
26 |
27 | @utility rounded-bl-* {
28 | border-bottom-left-radius: calc(--value(integer) * 1px);
29 | }
30 |
31 | @utility rounded-br-* {
32 | border-bottom-right-radius: calc(--value(integer) * 1px);
33 | }
34 |
35 | @utility tracking-* {
36 | letter-spacing: calc(--value(integer) * 0.0001em);
37 | }
38 |
39 | @utility scrollbar-none {
40 | scrollbar-width: none;
41 |
42 | &::-webkit-scrollbar {
43 | width: 0px;
44 | height: 0px;
45 | }
46 | }
47 |
48 | @utility scrollbar-thin {
49 | scrollbar-width: thin;
50 | }
51 |
--------------------------------------------------------------------------------
/src/hero/canvas.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { liquidFragSource } from '@/app/hero/liquid-frag';
4 | import { useEffect, useRef, useState } from 'react';
5 | import { toast } from 'sonner';
6 |
7 | // uniform sampler2D u_image_texture;
8 | // uniform float u_time;
9 | // uniform float u_ratio;
10 | // uniform float u_img_ratio;
11 | // uniform float u_patternScale;
12 | // uniform float u_refraction;
13 | // uniform float u_edge;
14 | // uniform float u_patternBlur;
15 | // uniform float u_liquid;
16 |
17 | const vertexShaderSource = `#version 300 es
18 | precision mediump float;
19 |
20 | in vec2 a_position;
21 | out vec2 vUv;
22 |
23 | void main() {
24 | vUv = .5 * (a_position + 1.);
25 | gl_Position = vec4(a_position, 0.0, 1.0);
26 | }` as const;
27 |
28 | export type ShaderParams = {
29 | patternScale: number;
30 | refraction: number;
31 | edge: number;
32 | patternBlur: number;
33 | liquid: number;
34 | speed: number;
35 | };
36 |
37 | export function Canvas({
38 | imageData,
39 | params,
40 | processing,
41 | }: {
42 | imageData: ImageData;
43 | params: ShaderParams;
44 | processing: boolean;
45 | }) {
46 | const canvasRef = useRef
16 |
17 |
24 | @paper
25 |
26 |
27 |
28 |
29 |
30 |
31 |
33 |
34 |
35 |
36 | {logos.map((group, i) => (
37 |
38 |
51 | ))}
52 |
53 |
39 | {group.map(({ name, href, src }) => (
40 |
41 |
46 | ))}
47 |
48 |
49 | {i !== logos.length - 1 && }
50 |
42 | 
43 |
44 | {name}
45 | {
171 | event.preventDefault();
172 | event.stopPropagation();
173 | setDragging(true);
174 | }}
175 | onDragLeave={(event) => {
176 | event.preventDefault();
177 | event.stopPropagation();
178 | setDragging(false);
179 | }}
180 | onDragOver={(event) => {
181 | event.preventDefault();
182 | event.stopPropagation();
183 | }}
184 | onDrop={(event) => {
185 | event.preventDefault();
186 | event.stopPropagation();
187 | setDragging(false);
188 | const files = event.dataTransfer.files;
189 | handleFiles(files);
190 | }}
191 | >
192 |
333 | );
334 | }
335 |
336 | interface ControlProps {
337 | label: string;
338 | min: number;
339 | max: number;
340 | step: number;
341 | value: number;
342 | format?: (value: string) => string;
343 | onValueChange: (value: number) => void;
344 | }
345 |
346 | function Control({ label, min, max, step, format, value, onValueChange }: ControlProps) {
347 | return (
348 | <>
349 | {
196 | switch (state.background) {
197 | case 'metal':
198 | return 'linear-gradient(to bottom, #eee, #b8b8b8)';
199 | }
200 | return state.background;
201 | })(),
202 | }}
203 | >
204 |
208 |
209 |
205 | {imageData && }
206 |
207 |
210 | setState((state) => ({ ...state, refraction: value }))}
275 | />
276 | setState((state) => ({ ...state, edge: value }))}
283 | />
284 | setState((state) => ({ ...state, patternBlur: value }))}
291 | />
292 | setState((state) => ({ ...state, liquid: value }))}
299 | />
300 | setState((state) => ({ ...state, speed: value }))}
307 | />
308 | (value === '0' || value === '10' ? value : parseFloat(value).toFixed(1))}
315 | onValueChange={(value) => setState((state) => ({ ...state, patternScale: value }))}
316 | />
317 |
318 |
332 |
211 |
212 |
213 |
214 |
221 |
222 |
228 |
229 |
235 |
236 |
264 |
265 |
266 |
319 |
326 |
331 | 327 | Tips: transparent or white background is required. Shapes work better than words. Use an SVG or a 328 | high-resolution image. 329 |
330 |
350 |
353 |
354 |
355 | onValueChange(value)}>
356 |
357 |
358 |
365 |
366 |
367 |
368 | onValueChange(parseFloat(value))}
377 | />
378 |
379 |
380 | );
381 | }
382 |
--------------------------------------------------------------------------------
/src/hero/params.ts:
--------------------------------------------------------------------------------
1 | export type ShaderParams = {
2 | patternScale: number;
3 | refraction: number;
4 | edge: number;
5 | patternBlur: number;
6 | liquid: number;
7 | speed: number;
8 | };
9 |
10 | export const params = {
11 | refraction: {
12 | min: 0,
13 | max: 0.06,
14 | step: 0.001,
15 | default: 0.015,
16 | },
17 | edge: {
18 | min: 0,
19 | max: 1,
20 | step: 0.01,
21 | default: 0.4,
22 | },
23 | patternBlur: {
24 | min: 0,
25 | max: 0.05,
26 | step: 0.001,
27 | default: 0.005,
28 | },
29 | liquid: {
30 | min: 0,
31 | max: 1,
32 | step: 0.01,
33 | default: 0.07,
34 | },
35 | speed: {
36 | min: 0,
37 | max: 1,
38 | step: 0.01,
39 | default: 0.3,
40 | },
41 | patternScale: {
42 | min: 1,
43 | max: 10,
44 | step: 0.1,
45 | default: 2,
46 | },
47 | };
48 |
49 | /** The default params for the shader in a ShaderParams object */
50 | export const defaultParams: ShaderParams = Object.fromEntries(
51 | Object.entries(params).map(([key, value]) => [key, value.default])
52 | ) as ShaderParams;
53 |
--------------------------------------------------------------------------------
/src/hero/parse-logo-image.ts:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | /** Cleans up the input image by turning it into a black and white mask with a beveled edge */
4 |
5 | export function parseLogoImage(file: File): Promise<{ imageData: ImageData; pngBlob: Blob }> {
6 | const canvas = document.createElement('canvas');
7 | const ctx = canvas.getContext('2d');
8 |
9 | return new Promise((resolve, reject) => {
10 | if (!file || !ctx) {
11 | reject(new Error('Invalid file or context'));
12 | return;
13 | }
14 |
15 | const img = new Image();
16 | img.onload = function () {
17 | // Force SVG to load at a high fidelity size if it's an SVG
18 | if (file.type === 'image/svg+xml') {
19 | img.width = 1000; // or whatever base size you prefer
20 | img.height = 1000;
21 | }
22 |
23 | const MAX_SIZE = 1000;
24 | const MIN_SIZE = 500;
25 | let width = img.naturalWidth;
26 | let height = img.naturalHeight;
27 |
28 | // Calculate new dimensions if image is too large or too small
29 | if (width > MAX_SIZE || height > MAX_SIZE || width < MIN_SIZE || height < MIN_SIZE) {
30 | if (width > height) {
31 | if (width > MAX_SIZE) {
32 | height = Math.round((height * MAX_SIZE) / width);
33 | width = MAX_SIZE;
34 | } else if (width < MIN_SIZE) {
35 | height = Math.round((height * MIN_SIZE) / width);
36 | width = MIN_SIZE;
37 | }
38 | } else {
39 | if (height > MAX_SIZE) {
40 | width = Math.round((width * MAX_SIZE) / height);
41 | height = MAX_SIZE;
42 | } else if (height < MIN_SIZE) {
43 | width = Math.round((width * MIN_SIZE) / height);
44 | height = MIN_SIZE;
45 | }
46 | }
47 | }
48 |
49 | canvas.width = width;
50 | canvas.height = height;
51 |
52 | // Draw the user image on an offscreen canvas.
53 | const shapeCanvas = document.createElement('canvas');
54 | shapeCanvas.width = width;
55 | shapeCanvas.height = height;
56 | const shapeCtx = shapeCanvas.getContext('2d')!;
57 | shapeCtx.drawImage(img, 0, 0, width, height);
58 |
59 | // 1) Build the inside/outside mask:
60 | // Non-shape pixels: pure white (255,255,255,255) or fully transparent.
61 | // Everything else is part of a shape.
62 | const shapeImageData = shapeCtx.getImageData(0, 0, width, height);
63 | const data = shapeImageData.data;
64 | const shapeMask = new Array(width * height).fill(false);
65 | for (var y = 0; y < height; y++) {
66 | for (var x = 0; x < width; x++) {
67 | var idx4 = (y * width + x) * 4;
68 | var r = data[idx4];
69 | var g = data[idx4 + 1];
70 | var b = data[idx4 + 2];
71 | var a = data[idx4 + 3];
72 | if ((r === 255 && g === 255 && b === 255 && a === 255) || a === 0) {
73 | shapeMask[y * width + x] = false;
74 | } else {
75 | shapeMask[y * width + x] = true;
76 | }
77 | }
78 | }
79 |
80 | function inside(x: number, y: number) {
81 | if (x < 0 || x >= width || y < 0 || y >= height) return false;
82 | return shapeMask[y * width + x];
83 | }
84 |
85 | // 2) Identify boundary (pixels that have at least one non-shape neighbor)
86 | var boundaryMask = new Array(width * height).fill(false);
87 | for (var y = 0; y < height; y++) {
88 | for (var x = 0; x < width; x++) {
89 | var idx = y * width + x;
90 | if (!shapeMask[idx]) continue;
91 | var isBoundary = false;
92 | for (var ny = y - 1; ny <= y + 1 && !isBoundary; ny++) {
93 | for (var nx = x - 1; nx <= x + 1 && !isBoundary; nx++) {
94 | if (!inside(nx, ny)) {
95 | isBoundary = true;
96 | }
97 | }
98 | }
99 | if (isBoundary) {
100 | boundaryMask[idx] = true;
101 | }
102 | }
103 | }
104 |
105 | // 3) Poisson solve: Δu = -C (i.e. u_xx + u_yy = C), with u=0 at the boundary.
106 | var u = new Float32Array(width * height).fill(0);
107 | var newU = new Float32Array(width * height).fill(0);
108 | var C = 0.01;
109 | var ITERATIONS = 300;
110 |
111 | function getU(x: number, y: number, arr: Float32Array) {
112 | if (x < 0 || x >= width || y < 0 || y >= height) return 0;
113 | if (!shapeMask[y * width + x]) return 0;
114 | return arr[y * width + x];
115 | }
116 |
117 | for (var iter = 0; iter < ITERATIONS; iter++) {
118 | for (var y = 0; y < height; y++) {
119 | for (var x = 0; x < width; x++) {
120 | var idx = y * width + x;
121 | if (!shapeMask[idx] || boundaryMask[idx]) {
122 | newU[idx] = 0;
123 | continue;
124 | }
125 | var sumN = getU(x + 1, y, u) + getU(x - 1, y, u) + getU(x, y + 1, u) + getU(x, y - 1, u);
126 | newU[idx] = (C + sumN) / 4;
127 | }
128 | }
129 | // Swap u with newU
130 | for (var i = 0; i < width * height; i++) {
131 | u[i] = newU[i];
132 | }
133 | }
134 |
135 | // 4) Normalize the solution and apply a nonlinear remap.
136 | var maxVal = 0;
137 | for (var i = 0; i < width * height; i++) {
138 | if (u[i] > maxVal) maxVal = u[i];
139 | }
140 | const alpha = 2.0; // Adjust for contrast.
141 | const outImg = ctx.createImageData(width, height);
142 |
143 | for (var y = 0; y < height; y++) {
144 | for (var x = 0; x < width; x++) {
145 | var idx = y * width + x;
146 | var px = idx * 4;
147 | if (!shapeMask[idx]) {
148 | outImg.data[px] = 255;
149 | outImg.data[px + 1] = 255;
150 | outImg.data[px + 2] = 255;
151 | outImg.data[px + 3] = 255;
152 | } else {
153 | const raw = u[idx] / maxVal;
154 | const remapped = Math.pow(raw, alpha);
155 | const gray = 255 * (1 - remapped);
156 | outImg.data[px] = gray;
157 | outImg.data[px + 1] = gray;
158 | outImg.data[px + 2] = gray;
159 | outImg.data[px + 3] = 255;
160 | }
161 | }
162 | }
163 | ctx.putImageData(outImg, 0, 0);
164 | canvas.toBlob((blob) => {
165 | if (!blob) {
166 | reject(new Error('Failed to create PNG blob'));
167 | return;
168 | }
169 | resolve({
170 | imageData: outImg,
171 | pngBlob: blob,
172 | });
173 | }, 'image/png');
174 | };
175 |
176 | img.onerror = () => reject(new Error('Failed to load image'));
177 | img.src = URL.createObjectURL(file);
178 | });
179 | }
180 |
--------------------------------------------------------------------------------
/src/hero/upload-image.ts:
--------------------------------------------------------------------------------
1 | import { toast } from 'sonner';
2 |
3 | export async function uploadImage(pngBlob: Blob): Promise