explaingit

cgoldsby/logincritter

★ 5,681SwiftAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

LoginCritter is an iOS animation demo where a cartoon bear reacts in real time to a login form, rotating its head while you type your email and covering its eyes when you switch to the password field.

Mindmap

mindmap
  root((repo))
    What it does
      Animates bear character
      Reacts to typing
      Shows password state
    Tech Stack
      Swift
      UIPropertyAnimator
      Affinity Designer
      iOS
    Use Cases
      UI animation reference
      Login screen inspiration
      iOS animation learning
    Audience
      iOS developers
      UI designers
    Bear States
      Neutral
      Active tracking
      Shy covers eyes
      Ecstatic at symbol
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Copy the animation patterns as a starting point for building an expressive, character-driven login screen in your own iOS app.

USE CASE 2

Study how UIPropertyAnimator ties animation progress directly to text field input to create interactive, interruptible animations.

USE CASE 3

Use the included Affinity Designer source file as a reference for creating vector character assets that can be animated as separate parts.

Tech stack

SwiftUIPropertyAnimatoriOSAffinity Designer

Getting it running

Difficulty · easy Time to first run · 5min

Clone and open in Xcode, no external dependencies or API keys required.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

LoginCritter is an iOS animation demo written in Swift that shows a small cartoon bear character responding to a login screen in real time. As a user types their email address, the bear's head rotates to follow the text. When the user taps the password field, the bear covers its eyes with its paws. Typing an @ symbol into the email field makes the bear look excited. Toggling the "show password" button causes the bear to peek through its paws. The project was built as a creative exercise inspired by an animated login form concept posted on the design community Dribbble. The author wanted to recreate that kind of playful, character-driven login screen in native iOS code. Technically, the animations are driven by UIPropertyAnimator, an iOS framework for building interactive and interruptible animations. The bear's head rotation is tied directly to how far along the user is in typing: as more characters fill the text field, the animator advances proportionally. The bear is made up of separate vector image parts, each of which can be animated independently. The character has several named states: neutral (resting), active (following text input), ecstatic (triggered by the @ character), shy (covering eyes when the password field is active), and peek (partially uncovering eyes when the show-password button is toggled). States can combine, so the bear can be both ecstatic and actively tracking text at the same time. The bear's visual assets were created in Affinity Designer and stored as vector PDFs in the repository. The raw design file is also included. The project is distributed under the MIT license and is intended as an example and reference for iOS developers interested in building expressive UI animations.

Copy-paste prompts

Prompt 1
Show me how to use UIPropertyAnimator in Swift so that a view's rotation updates in real time as the user types into a UITextField, like the LoginCritter bear.
Prompt 2
I want to add a shy animation to a character in my iOS app when the user taps a password field. How do I detect that field focus change and trigger the animation?
Prompt 3
How do I split a character illustration into separate layers in Affinity Designer and export them as individual PDFs so they can be animated independently in an iOS app?
Prompt 4
Add a new bear state to LoginCritter that makes the bear wave when the login button is tapped.
Open on GitHub → Explain another repo

← cgoldsby on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.