{"id":18059237,"url":"https://github.com/flo-bit/svelte-depth-3d-component","last_synced_at":"2025-04-11T08:56:24.955Z","repository":{"id":240601103,"uuid":"803071372","full_name":"flo-bit/svelte-depth-3d-component","owner":"flo-bit","description":"svelte component to show a fake 3d image with depth map","archived":false,"fork":false,"pushed_at":"2024-12-21T21:25:26.000Z","size":11699,"stargazers_count":14,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-06T06:31:46.260Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://flo-bit.dev/svelte-depth-3d-component/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flo-bit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-20T02:27:04.000Z","updated_at":"2024-12-21T21:24:57.000Z","dependencies_parsed_at":"2024-06-22T12:25:20.420Z","dependency_job_id":"1591e853-3fc1-4efb-a080-745470a60beb","html_url":"https://github.com/flo-bit/svelte-depth-3d-component","commit_stats":null,"previous_names":["flo-bit/svelte-depth-3d-component"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flo-bit%2Fsvelte-depth-3d-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flo-bit%2Fsvelte-depth-3d-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flo-bit%2Fsvelte-depth-3d-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flo-bit%2Fsvelte-depth-3d-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flo-bit","download_url":"https://codeload.github.com/flo-bit/svelte-depth-3d-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248363490,"owners_count":21091369,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-31T03:10:40.718Z","updated_at":"2025-04-11T08:56:24.927Z","avatar_url":"https://github.com/flo-bit.png","language":"Svelte","funding_links":[],"categories":["Svelte"],"sub_categories":[],"readme":"# svelte depth 3d component\n\nDisplay an image with a fake 3D effect, using a depth map. Made for svelte, using threlte, threejs and tailwindcss. Still a work in progress, but usable.\n\n[Try the demo here.](https://flo-bit.github.io/svelte-depth-3d-component/)\n\n\n\nhttps://github.com/user-attachments/assets/74b05fd6-feef-49da-9b38-523b65bf5da8\n\n\n\n## How to use\n\n1. Copy and paste the [`src/lib/Depth3D/`](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2Fflo-bit%2Fsvelte-depth-3d-component%2Ftree%2Fmain%2Fsrc%2Flib%2FDepth3D) folder of this repository into your svelte projects `src/lib/` folder.\n2. Install [tailwindcss](https://tailwindcss.com/docs/guides/sveltekit) and [threlte (core and extras)](https://threlte.xyz/docs/learn/getting-started/installation) (work through their setup or see below for commands)\n3. Get an image and generate a accompanying depth map, for example using [zoedepth](https://replicate.com/cjwbw/zoedepth)\n4. Use the `Depth3D` component in your pages directly like so:\n\n```svelte\n\u003cscript\u003e\n  // Depth3D example\n  import Depth3D from '$lib/Depth3D';\n\u003c/script\u003e\n\n\u003c!-- will adjust to the parents size/position --\u003e\n\u003cDepth3D\n\timage={{\n\t\timage: 'your-image.png',\n\t\tdepth: 'your-depth.png'\n\t}}\n/\u003e\n```\n\n## Which images work well\n\nThis effect only simulates 3D, so some images will show weird artifacts. Portraits with a single person in the middle tend to work well. The effect will also depend on the quality of the depth map. Some trial and error might be necessary to get the desired effect.\n\n## Installing the dependencies\n\n### TailwindCSS (assuming you created your svelte app with the svelte create command)\n\n1. Install\n```bash\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n2. Update your tailwind.config.js file to find files with tailwind classes:\n```js\ncontent: ['./src/**/*.{html,js,svelte,ts}'],\n```\n3. Create a app.css file in your src folder.\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n4. Import the css file in your +layout.svelte file\n```svelte\n\u003cscript\u003e\n  import \"../app.css\";\n\u003c/script\u003e\n\n\u003cslot /\u003e\n```\n\n### Threlte (core and extras)\n\n1. Install\n```bash\nnpm install three @threlte/core \\\n            @threlte/extras \\\n            @types/three\n```\n\n## License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflo-bit%2Fsvelte-depth-3d-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflo-bit%2Fsvelte-depth-3d-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflo-bit%2Fsvelte-depth-3d-component/lists"}