Glitch Postcards
A playful postcard designer where users upload (or pick from built-in) photos, then apply simple “glitch” effects—pixel-sorting strips, RGB channel shift, scanlines, and noise—with live preview and a one-click randomize button. Users can add a short message with typographic presets, choose a color frame, and export the final postcard as a PNG. All created postcards are saved locally with a small gallery view for re-editing, duplicating, and deleting.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init -d
by system
Configure Tailwind content paths and add @tailwind directives to src/index.css.
by system
Add shadcn/ui components needed (Button, Card, Dialog, Input, Slider, Select, Tabs, DropdownMenu, Tooltip) via the shadcn CLI.
by system
Create src/types/postcard.ts with interfaces for Postcard, EffectsConfig, TextConfig, and FrameConfig.
by system
Create src/lib/storage.ts with load/save CRUD helpers for postcards in localStorage.
by system
Create src/lib/id.ts to generate unique IDs and timestamps for saved postcards.
by system
Create src/data/builtinImages.ts exporting a small array of bundled image URLs + labels.
by system
Implement src/App.tsx with a two-column layout (editor + gallery) using shadcn Card/Tabs.
by system
Add src/components/HeaderBar.tsx with app title and primary actions placeholder.
by system
Implement src/components/PostcardCanvas.tsx rendering a <canvas> and exposing a redraw() via props.
by system
Create src/lib/render/renderPostcard.ts to draw photo, frame, text, and effects onto a canvas.
by system
Create src/lib/render/loadImage.ts returning an HTMLImageElement from a URL/DataURL safely.
by system
Create src/lib/effects/scanlines.ts applying scanline overlay to ImageData.
by system
Create src/lib/effects/noise.ts applying adjustable monochrome noise to ImageData.
by system
Create src/lib/effects/rgbShift.ts shifting color channels by configurable offsets.
by system
Create src/lib/effects/pixelStrips.ts generating horizontal/vertical glitch strips with sorting/offset.
by system
Create src/lib/effects/applyEffects.ts to apply enabled effects in a deterministic order.
by system
Create src/lib/randomize.ts to generate a randomized EffectsConfig (with sane bounds).
by system
Implement src/components/PhotoPicker.tsx with upload input plus built-in image selection.
by system
Create src/lib/fileToDataUrl.ts converting an uploaded file to a DataURL for storage/rendering.
by system
Implement src/components/EffectsPanel.tsx with sliders/toggles for all glitch effects.
by system
Create src/data/textPresets.ts defining a few typographic presets (font size, weight, tracking, alignment).
by system
Implement src/components/MessagePanel.tsx with textarea and preset selector.
by system
Implement src/components/FramePanel.tsx with color swatches and thickness slider.
by system
Create src/hooks/usePostcardEditor.ts managing current postcard draft state and change handlers.
by system
Update src/components/EditorPage.tsx to call render pipeline on state changes and redraw canvas.
by system
Create src/lib/exportPng.ts to download the current canvas as a PNG file.
by system
Implement src/components/GalleryPanel.tsx showing saved postcards as thumbnails with actions.
by system
Implement duplicate/delete/re-edit handlers in src/components/GalleryPanel.tsx using storage helpers.
by system
Create src/hooks/usePostcardsStore.ts to load/save/update postcards in localStorage and expose actions.
by system