The first place winner of the Seam Miniapp Challenge is Dizzy Text created by @shloknemani! Dizzy Text is a new way to share text on Seam, by flashing one word at a time and alternating background colors. Dizzy Text harkens back to an earlier age on the internet, when HTML marquee text tags ruled the forum boards. While simple in concept, Dizzy Text has captivated Seam users over the past week of miniapp challenge voting for its simplicity yet flair.

How to Use Dizzy Text:

1. Input your string: Type in the message you want to display.

2. Choose your font size: Make your text as big and bold as you like.

3. Pick your colors: Select a foreground and background color for maximum contrast.

4. Set the transition time: Decide how quickly you want the colors to flash.

What we love: Dizzy Text works just as well for quick thoughts as it does for fun comments. After all, Seam miniapps can be used in the comments of posts and Dizzy Text excels at elevating simple statements.

Quick Tip: You can also use Dizzy Text as a quick flipbook or animation! Emojis look particularly good as they flash through the different options.

The Technical Implementation: The code for the Dizzy Text miniapp can be found in this Pull Request. The implementation of Dizzy is super simple and is a great example of what can be accomplished in just a few lines of code as a miniapp. The entire miniapp feed component is just 19 lines of code!

export const DizzyFeedComponent = ({ model }: FeedComponentProps) => {
  const wordsUserText = model.data.userText.split(" ");
  const colors = [model.data.userFGColor, model.data.userBGColor];
  const [i, setI] = useState(0);
  const userTextSize = parseInt(model.data.userTextSize);
  const userTransTime = parseInt(model.data.userTransTime);
  useEffect(() => {
    const interval = setInterval(() => {
      setI((i === wordsUserText.length - 1) ? 0 : i + 1)
    }, userTransTime);
    return () => clearInterval(interval);
  }, [i, wordsUserText.length, userTransTime]);
  return (
    <div className='p-3 text-center font-bold rounded-lg' style={{ color: colors[i % 2], background: colors[(i + 1) % 2], fontSize: userTextSize }}>
      {wordsUserText[i]}
    </div>
  )
}

Meet the Creator: You can find shloknemani on Seam, and on Instagram @shloknemani .