Claude MarketplacesSubmit

Lightweight 3d Effects

freshtechbro/claudedesignskills

This packages three specific libraries for adding visual depth without the overhead of full 3D engines. Zdog gives you pseudo-3D vector illustrations with a 28kb footprint and drag rotation built in. Vanta.js handles animated WebGL backgrounds (waves, clouds, birds, fog) powered by Three.js with mouse interaction at 60fps. Vanilla-Tilt adds parallax tilt effects to cards and images. Good fit for landing pages and marketing sites where you want eye candy but can't afford heavy frameworks. The examples are thorough, especially for Zdog shape composition and Vanta effect configuration. Performance stays reasonable because these libraries are purpose-built for decorative effects rather than complex 3D scenes.

skills.sh installs: 2.8K
GitHub stars: 1.3K
last updated: Aug 21, 2026

Install

$ npx -y skills add freshtechbro/claudedesignskills --skill lightweight-3d-effects --agent claude-code

Installs into .claude/skills of the current project.

Files

Lightweight 3D Effects Skill

Overview

This skill combines three powerful libraries for decorative 3D elements and micro-interactions:

Zdog: Pseudo-3D engine for designer-friendly vector illustrations
Vanta.js: Animated 3D backgrounds powered by Three.js/p5.js
Vanilla-Tilt.js: Smooth parallax tilt effects responding to mouse/gyroscope

When to Use This Skill

Add decorative 3D illustrations without heavy frameworks
Create animated backgrounds for hero sections
Implement subtle parallax tilt effects on cards/images
Build lightweight landing pages with visual depth
Add micro-interactions that enhance UX without performance impact

Zdog - Pseudo-3D Illustrations

Core Concepts

Zdog is a pseudo-3D engine that renders flat, round designs in 3D space using Canvas or SVG.

Key Features:

Designer-friendly declarative API
Small file size (~28kb minified)
Canvas or SVG rendering
Drag rotation built-in
Smooth animations

Basic Setup

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly

Agent CaffeineSponsoredClose your lid, come back to finished work

SnugSponsoredThe clipboard manager for the AI era Promote your product hereReach 125k+ visitors monthly

WaxSponsoredBlock anything with supervision, without erasing your iPhone Promote your product hereReach 125k+ visitors monthly

knobsSponsoredSee your site on any phone, any day, in any language

Details

Repository: github.com/freshtechbro/claudedesignskills
Category: Debugging
First seen: Jun 3, 2026

Recommended

1

keyword-researcheronred/aso-skillsWhen the user wants to discover, evaluate, or prioritize App Store keywords. Also use when the user mentions "keyword research", "find keywords", "search volume2.8Kskills.sh installs

2

context-engineering-advisordeanpeters/product-manager-skillsDiagnose context stuffing vs. context engineering. Use when an AI workflow feels bloated, brittle, or hard to steer reliably.2.8Kskills.sh installs

3

focus-enginedpearson2699/swift-ios-skillsImplements keyboard, directional, and scene-level focus behavior across SwiftUI and UIKit. Use when managing @FocusState, defaultFocus, focused values, focusabl2.8Kskills.sh installs

4

mantine-formmantinedev/skillsBuild forms using @mantine/form in the mantine-9 repository. Use this skill when: (1) setting up a form with useForm, (2) adding validation rules or async valid2.8Kskills.sh installs

5

blog-seo-checkagricidaniel/claude-blogPost-writing SEO validation with pass/fail checklist covering title tag length and keyword placement, meta description quality, heading hierarchy and keyword de2.8Kskills.sh installs

6

android-native-devminimax-ai/skillsAndroid native application development and UI design guide. Covers Material Design 3, Kotlin/Compose development, project configuration, accessibility, and buil2.7Kskills.sh installs