This motivation quote image maker demo generates an image like you see on social media. We've all seen motivational quotes in our feeds and this demo make it easy to create your own.
The demo includes a form with three fields for the quote, an image search term and a style.
The image search field will search the Pexels image library. One of the returned images is set as the background for the quote.
The style dropdown sets the font and border style to apply to the image. The border is simple transparent PNG layered over the image.
Clicking submit sends the JSON to the Shotstack API for rendering. The API merges the text, image, font and border to create the final image.
You can use this project as the starting point for your own project or workflow. You could create daily quotes from a database or a user generated quote or meme maker. You could also swap images for videos.
The source code is available on GitHub and is open source. The front end is HTML, Bootstrap and jQuery. The backend is a simple Node.js and Express application. It can also be deployed as a Serverless application.
curl --request POST 'https://api.shotstack.io/v1/render' \
--header 'x-api-key: YOUR_API_KEY' \
--data-raw '{
"timeline": {
"tracks": [
{
"clips": [
{
"asset": {
"type": "video",
"src": "https://shotstack-assets.s3.amazonaws.com/footage/beach-overhead.mp4"
},
"start": 0,
"length": "auto"
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1280,
"height": 720
}
}
}'