https://teffects.codewithshin.com/

Teffects automates creating header images for your articles, email, presentation and other purposes. Tested on macOS and Ubuntu.

• Bash version 5 or higher.

If you are using macOS:

brew install bash

• Firefox: Teffects uses Firefox to take a screenshot.
• To run the clip command you need wkhtmlpdf/wkhtmltoimage.

$ brew tap shinokada/teffects
$ brew install teffects

Using Awesome package manager:

awesome install shinokada/teffects

Download the latest debian package from releases

$ sudo apt install /path/to/teffects_XXXXX-X_all.deb

Or download the repo and move to a bin directory.

You can find all options using -h or --help for each command.

$ teffects 3d -h
$ teffects arcade -h
$ teffects clip -h

Examples:

$ teffects 3d -t "Your Heading" -d ~/Downloads
$ teffects arcade -t "Awesome Heading" -d ~/Downloads
$ teffects clip -d -t "Amazing Heading" ~/Downloads

Find all the options using teffects 3d -h.

$ teffects 3d -d ~/Downloads

3d is inspired by Håvard Brynjulfsen's 3D letters - sugar sweet.

Find all the options using teffects animate -h.

$ teffects animate -t "Teffects rocks"　-s 4

Animate is inspired by Florin Pop's Letter Animation.

Find all the options using teffects arcade -h.

$ teffects arcade -t "arcade texts" -w 800 -e 300 -d ~/Downloads

Arcade is inspired by Lynn Fisher's CSS Arcade Typography: Snow Bros. 1990.

• Use -w 2000 for a multi-line heading.
• Not able to change a font size.

Find all the options using teffects blob -h.

$ teffects blob -t "Create Your Programming Article Heading Image with Teffects" -w 1200 -e 900 -s 8

Blob is inspired by Amli's Animated Blobs Text - Multiple Colors

This is a bubble animation effect and it will open a browser.

Find all the options using teffects bubble -h.

$ teffects bubble -t "long lorem ipsum and more"  i -c "#ff2d2d" -b "#008ac1"

Bubble is inspired by html5andblog's Bubbling Text Effect

Circulating in texts for one line. If your line is long you need to adjust with font size -s and screen width -w options.

Find all the options using teffects circulate -h.

Change circulating colors using the --colors option. Use max of 6 hexdecimal colors without # symbol:

$ teffects circulate2 -t Teffects --colors "eee ed4bc7 4d76ed ccc"

Circulate is inspired by Cesar C.'s Animated text fill with svg text practice.

This is a CSS clip animation effect and it will open a browser.

Find all the options using teffects clip-animate -h.

$ teffects clip-animate -t "TEFFECTS CLIP ANIMATE" -v "NEW CSS ANIMATION" -u "FOR YOUR ARTICLE"

Clip-animate is inspired by Daniel Riemer's Animated text fill

Find all the options using teffects click -h.

$ teffects clip -t "Bash script to clip an image to text" -w 1400 -e 900 -d ~/Downloads

Clip is inspired by this video.

Clip uses wkhtmltoimage and can't handle advanced CSS.

• font size should be px.
• Not able to use flex.

Find all the options using teffects covfete -h.

$ teffects covfete -t "Medium Article Title" -w 1450

Covfete is inspired by Background clipping covfefe by Stephanie.

Find all the options using teffects dashed-shadow -h.

$ teffects dashed-shadow -t "Awesome"

Dashed-shadow is inspired by Lucas Bebber's CSS Dashed Shadow.

This is a CSS animation effect and it will open a browser.

Find all the options using teffects glow -h.

$ teffects glow -t "Teffects Glow Effects" -l "2px" -p 150px -g "#ff3299"

Glow is inspired by kiran raj r's Css Text Effect--Glow Effect3

This is a CSS animation effect and it will open a browser.

Find all the options using teffects jump -h.

$ teffects jump
$ teffects jump -t "LOREM IPSUM" -c "#eee" -b "#EF6667" -s 4

Jump is inspired by kiran raj r's Css Text Effect--fade Effect

Find all the options using teffects layer -h.

$ teffects layer -t Teffects -w 1040 -e 400

Layered text-shadow effect CSS by Shireen Taj

Find all the options using teffects neon -h.

$ teffects neon -t "Teffects NEON LIGHTS" -b purple -s 80 -e 800 -w 1020

Neon light text by Sarah Fossheim

Choose different neon styles by using the -n option with any number from 1 to 9.

Find all the options using teffects new-neon -h.

$ teffects new-neon -t "Teffects NEON LIGHTS" -n 5

Erik Jung's Neon text-shadow effect

Find all the options using teffects pinchy -h.

$ teffects pinchy -w 1200 -e 400

Inspired by Pinchy Type with CSS text-shadow by Bennett Feely

Find all the options using teffects popart -h.

$ teffects popart -t "Bold, bright and brash" -e 600
$ teffects popart -t "Bold, bright" -e 600 -b purple -s 200 -a left

Typo triple by creatz

Find all the options using teffects retro -h.

$ teffects retro -t Super -s Duper -d ~/Downloads

Retro is inspired by Yoav Kadosh's Retro Text Effect Pure CSS.

Find all the options using teffects reveal -h.

$ teffects reveal -u "More text here" -d "And more and more" -s 8 -b "#333" -f "#123" -g "#ff3344" -c "#fff"

Reveal is inspired by Artur Sedlukh's GSAP text reveal animation.

This is a CSS animation effect and it will open a browser.

Find all the options using teffects rotate -h.

$ teffects rotate -t "Create header image" -s 4 "for Medium article" "for Blog" "for Email" "for Presentation" "for socila media" "from terminal"

Rotate is inspired by Rachel Smith's Rotating text.

This is a CSS animation effect and it will open a browser.

Find all the options using teffects shade -h.

$ teffects shade -t "Teffects Shade" -s 20 -e 600

Shade is inspired by Shaded Text by Rafael González.

Find all the options using teffects shadow -h.

$ teffects shadow -t "Awesome"

Shadow is inspired by Styling Text with SVG (Second Shadow) by Code School.

Use the -y parameter with elegant | deep | inset | retro | long

Find all the options using teffects shadow2 -h.

$ teffects shadow2 -t "Awesome" -y deep

Shadow2 is inspired by Jorge Epuñan's CSS3 text-shadow effects and roikles's Long Shadow Gradient Mixin.

Find all the options using teffects silentfilm -h.

$ teffects silentfilm

Silentfilm is inspired by Dimitra Vasilopoulou's Silent Movie Text Effect.

Find all the options using teffects smoky -h.

$ teffects smoky -t "Teffects rocks"　-s 4

Smoky is inspired by Bennett Feely's Smoky Text.

This is a CSS animation effect and it will open a browser.

Find all the options using teffects split -h.

$ teffects split -t AWESOME -w 800 -e 200 -d ~/Downloads
$ teffects split -t "AWESOME" -c "#4465aa" -b "#f4e990" -w 900 -e 500 -d ~/Downloads

Split is inspired by Håvard Brynjulfsen's Split text with clip-path.

Find all the options using teffects squiggle -h.

You can add HTML text as the following example:

$ teffects squiggle -t 'Squiggly Text
  <p class="small">– with – <p/>
  SVG Filters
  <p class="small">(you can even edit this text)</p>
  <p class="smaller">(Here more text)</p>'

Squiggle is inspired by Squiggly Text by Lucas Bebber.

Find all the options using teffects sticker -h.

$ teffects sticker -t Teffects -S Rocks -d ~/Downloads

Sticker is inspired by Stephanie Eckles's CSS Sticker.

Find all the options using teffects stripe -h.

$ teffects stripe
$ teffects stripe -t "Lorem ipsum dolor sit amet" -s 8 -e 600 -b "#eee"

Stripe is inspired by Animating striped text with background clip and gradients by Mandy Michael.

Find all the options using teffects strokeshadow -h.

$ teffects strokeshadow -c purple -t "Article heading" -s 170 --behind -e 400 -w 1400 -d ~/Downloads

$ teffects strokeshadow -c purple -t "Article heading" -s 170 -e 400 -w 1400 -d ~/Downloads

Strokeshadow is inspired by Mark Mead's Strokes, Shadows Halftone Effects.

Find all the options using teffects transmission -h.

$ teffects transmission -t "Awesome" -x "text lines" -s 5 -z 3
$ teffects transmission -t "Header line" -x "First line here
dquote> Second line here
dquote> third line here."

Transmission is inspired by Stephen Scaff's Transmission: Glowing Text Animation.

Find all the options using teffects type -h.

$ teffects type -t "Teffects rocks"　-s 4
$ teffects type 'Star Wars: ' 'It is a period of civil war.' 'Rebel spaceships,''striking from a hidden base, ' 'have won their first victory...' -s 4

Type is inspired by Jack Armley's Text typing thingamy.

Bash Script to Clip an Image to Text

@shinokada

Please see license.txt.