This sample demonstrates jQuery effects you could apply to a login dialog to make it more animated.
The jQuery UI libraries employed here includes "Effects Core", "Effect Highlight" and "Effect Shake".

<vlayout xmlns:c="client">
	<button id="initBtn" label="Login">
		<attribute name="onClick"><![CDATA[
			if (!loginWin.isVisible())
				loginWin.setVisible(true);
			loginWin.doHighlighted();
		]]></attribute>
	</button>
	<window id="loginWin" title="Login with zk/zk" width="300px" visible="false" minimizable="true" onOK="loginCheck()" border='normal'>
		<attribute name="onMinimize"><![CDATA[
		if (self.isMinimized())
			Clients.evalJavaScript("loginSuccess(" + event.getLeft().replace("px","") + "," + event.getTop().replace("px","") + ")");
		]]></attribute>
		<style>
		div.minimize {
			border: 1px solid #79858E;
			background: #D3E1EC;
			position: absolute;
			opacity: 0.8;		
		}
		div.loginGrid { 
			border: none;
		}
		td.loginCtl {
			text-align: center;
		}
		td.loginCtl .z-label {
			color: red;			
			font-style: italic;
		}
		</style>
		<grid sclass="loginGrid">
			<columns>
				<column hflex="1" />
				<column hflex="2" />
			</columns>
			<rows>
				<row>User Name : <textbox id="name" value="zk" c:onFocus="this.select()" /></row>
				<row>Password : <textbox id="pwd" type="password" c:onFocus="this.select()"/></row>
				<row><cell sclass="loginCtl" colspan="2"><vlayout>
					<button label="Submit" onClick="loginCheck()" width="100px"/>
					<label id="mesg" />
				</vlayout></cell></row>
			</rows>
		</grid>
		<zscript><![CDATA[
		void loginCheck () {
			if ((name.getValue().equals("zk") && pwd.getValue().equals("zk"))) {
				mesg.setValue("");
				Clients.evalJavaScript("zk.Widget.$('$loginWin').setMinimized(true)");
				initBtn.getParent().appendChild(new Label("Login Success !! Welcome to ZK Demo!"));
			} else {
				mesg.setValue("User Name or Password Invalid!");
				Clients.evalJavaScript("loginFailed()");
			}; 
		}
		]]></zscript>
	</window>
	<script src="/widgets/effects/login_effect/jquery-ui-1.10.3.custom.min.js" />
	<script src="/widgets/effects/login_effect/customized_effect.js" />
</vlayout>

function loginSuccess(wleft, wtop) {
	
	var w = jq('$loginWin'), b = jq('$initBtn');
	//Minimize from the login Window
	jq('<div class="minimize" />').appendTo("body").css({
		left : wleft,
		top : wtop,
		width : w.width(),
		height : w.height()
	});
	//Minimize to the init Button
	p = b.offset();
	jq('.minimize').animate({
		left : p.left + b.width() / 2,
		top : p.top + b.height() / 2,
		width : 0,
		height : 0
	}, function() {
		jq(this).remove();
	});
}
function loginFailed() { //Shake the window
	var originalLeft = jq("$loginWin").position().left;
	var loginWin = jq("$loginWin");
	var previousBackgroundColor = loginWin.css('background-color');

	loginWin.animate({left : originalLeft - 25, backgroundColor : "red"}, 50)
		.animate({left : originalLeft}, 50)
		.animate({left : originalLeft + 25}, 50)
		.animate({left : originalLeft}, 50)
		.animate({backgroundColor : previousBackgroundColor}, 250, 
			function() {
				loginWin.css('background-color', '');
			} );
}