Skip to content

rishimohan/pika

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
January 6, 2022 18:10
February 1, 2022 14:36
January 1, 2022 19:22
January 19, 2022 12:10
December 28, 2021 19:18
October 26, 2022 21:04
December 28, 2021 19:18
October 26, 2022 20:57
December 29, 2021 01:40
December 28, 2021 19:18
December 29, 2021 01:40

NOTE: This repo contains free version features.

image

What is Pika?

Pika is a web app to transform RAW screenshots into beautiful images, which you would be proud to share on your landing pages, emails, Twitter or marketing pages.

The main goal behind Pika is to fasten this process of designing screenshots.

How Pika works?

Pika uses dom-to-image to generate an image from a DOM element. The DOM element is the canvas with your screenshot and all the stylings. Stylings are done using mix of inline CSS and Tailwind CSS.

How Pika makes designing screenshot quick?

  • Pika saves your options locally on your machine, so when you open the app next time it keeps your previous settings
  • Pika gives you shortcuts:
    • Ctrl/Cmd+V: paste a screenshot
    • Ctrl/Cmd+C: copy the output image
    • Ctrl/Cmd+S: save the output image

What all you can do with Pika?

  • Apply rounded corners to your screenshot
  • Apply background gradients
  • Control screenshot position in canvas, add padding
  • Add shadow to screenshot
  • Add noise to background to add RAW vibes
  • Add overlay text($$)
  • Add image as background($$)
  • Add custom watermark($$)

($$) are paid features and not available in this repo's code.

Setting up the app

First, run the development server:

  • Clone the repo
  • Setup with yarn
  • Run dev server with yarn dev
  • Open http://localhost:3000 with your browser to see the result.
  • File located at /components/main contains the code for canvas and the stylings

Built using

  • Next.js
  • TailwindCSS

License

Here

Assets

pika-filled-circle

About

Quickly design beautiful screenshots and open graph images

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published