[{"data":1,"prerenderedAt":362},["ShallowReactive",2],{"project-2399927":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":43,"post_text":44,"what":45,"said":64,"maker_in_thread":168,"shape":179,"grid":184,"attempts":325,"same_week":326,"maker_shows":42,"maker_hidden":354,"reader_version":355,"card":356},"2399927","Glowform","CSS3 Animated Glowing Forms","title","Show HN: CSS3 Animated Glowing Forms","http:\u002F\u002Fkaylarose.github.com\u002FGlowform\u002F","kaylarose.github.com","kaylarose",1301754236,2011,182,57,40,1097,4,"notable","creative","css animation demo","web_app",[24,25,26,27],"css3 animation","glowing form","css glow effect","webkit animation","mixed",-0.378,{"positive":31,"neutral":32,"mixed":33,"critical":34},3,5,7,14,29,{"performance":37,"design":39,"execution":40,"idea":41},{"positive":38,"critical":32},0,{"positive":31,"critical":32},{"positive":38,"critical":31},{"positive":38,"critical":42},1,[38,38,42,38,42,32,31,31,38,42,38,38,38,42,38,31,42,42,31,42,31,42,31,42,38,38,38,42,32,38,31,31,42,38,38,42,38,38,38,42],"I remember seeing the Dragon Labs Dragonfish Glowing Form Demo[1] when it first came out, and it always stuck in my head. They implement the effect by using a rather large background image and a mask image and move the background image around via Javascript. I was inspired and wanted to see how close I could get with CSS3.\n\nI recommend using a Webkit browser [and you can see an alternate version of the animation on Firefox 4].\n\n[1] http:\u002F\u002Flabs.dragoninteractive.com\u002Fpanel\u002Fdemo\u002F",{"problem":46,"audience":46,"pricing":46,"motivation":47,"time_to_build":46,"stack":56,"openness":61,"stage":62,"team_size":63},null,{"value":48,"source":49,"evidence":50},"Inspired by Dragonfish glowing form demo; wanted to see how close CSS3 could get","maker",[51,53],{"id":52},"post",{"id":54,"by":11,"text":55},"2399952","I remember being impressed by Dragon Lab's Dragonfish Login Form Demo[1] when it first came out. They implement the effect by using a rather large background image and a mask…",[57],{"value":58,"source":49,"evidence":59},"CSS3",[60],{"id":52},"unknown","prototype","solo",{"praise":65,"objections":89,"requests":134,"questions":151,"alternatives":163},[66,82],{"value":67,"source":68,"evidence":69},"Visually slick and cool-looking effect","commenter",[70,74,78],{"id":71,"by":72,"text":73},"2400028","jarin","Okay, that is just sexy looking. I feel like I need to make a gaming site now or something.",{"id":75,"by":76,"text":77},"2400160","Xurinos","Usability problem: the animation attracts attention, distracts the eye. The moving glow, mixed with the small lettering, makes it hard to read quickly. When the animation finally…",{"id":79,"by":80,"text":81},"2400136","zinssmeister","super slick! I can see this work well on an iPhone webview. I want it like ice cream :) Awesome job man.",{"value":83,"source":68,"evidence":84},"Fun demo that could be useful in a project",[85],{"id":86,"by":87,"text":88},"2400070","bmelton","I usually consider these exercises as fun, but pointless. This certainly meets that criteria, but I could actually see using this in a project. It is very hot. Are you also…",[90,98,113,124],{"value":91,"source":68,"evidence":92},"Animation is distracting and hurts form usability",[93,94],{"id":75,"by":76,"text":77},{"id":95,"by":96,"text":97},"2400867","nostrademons","The problem is that the intent of a user, when they see in a form, is to fill in that form. Adding a glowing background distracts them from their task, hence bad usability. It's…",{"value":99,"source":68,"evidence":100},"Uses significant CPU and runs slowly on some devices",[101,105,109],{"id":102,"by":103,"text":104},"2400143","elii","What's the point of having animated glowing forms if they swallow 50% of the machine's cpu?",{"id":106,"by":107,"text":108},"2408137","mauriciob","Maybe it's just me, but the CSS3 rendering uses more of my CPU than the image scrolling.",{"id":110,"by":111,"text":112},"2400259","wdewind","runs kinda slow on my iphone :(",{"value":114,"source":68,"evidence":115},"Low contrast grey text is hard to read",[116,120],{"id":117,"by":118,"text":119},"2400180","AndyJPartridge","I'm loving that glow! Great work. I'm outside on a laptop and can hardly read the grey text though.",{"id":121,"by":122,"text":123},"2400498","jiaaro","I agree on the importance of accessibility but just wanted to make a note that the only colors on that page are the glowing effect around the form. the rest of the page actually…",{"value":125,"source":68,"evidence":126},"Form HTML is invalid; submit button sits outside form",[127,131],{"id":128,"by":129,"text":130},"2400155","retlehs","Submit button is broken. Why is it outside of the \u003Cform>? Cool use of animation.",{"id":132,"by":129,"text":133},"2400291","It should still demonstrate proper HTML and it only takes a few seconds.. http:\u002F\u002Fdl.dropbox.com\u002Fu\u002F145404\u002Fdemo.html - submit inside the \u003Cform>",[135,144],{"value":136,"source":49,"evidence":137},"Fix contrast of grey text",[138,141],{"id":139,"by":11,"text":140},"2400223","Yeah, on some monitors the contrast is pretty low. I'll probably bump it up.",{"id":142,"by":11,"text":143},"2400506","Edit: Sorry, other people beat me to it. See other replies re:text colors. However I agree about the contrast, I checked on my external dev monitor (vs. my super bright MBP…",{"value":145,"source":68,"evidence":146},"Fix Firefox animation restart after refocus",[147],{"id":148,"by":149,"text":150},"2400116","malnourish","Firefox 4, animation does not restart after focusing a form field, clicking elsewhere, and then re-focusing on it. I quite like the whole effect, though.",[152,156],{"value":153,"source":68,"evidence":154},"Why is the submit button outside the form?",[155],{"id":128,"by":129,"text":130},{"value":157,"source":68,"evidence":158},"Why does this have so many upvotes?",[159],{"id":160,"by":161,"text":162},"2402183","mkilling","Why does this have 160 upvotes on Hacker News? It's CSS, it doesn't work in all browser and it's not even remotely useful",[164],{"value":165,"source":49,"evidence":166},"Dragonfish Glowing Form demo from Dragon Labs",[167],{"id":54,"by":11,"text":55},{"comments":169,"answered":170,"key":171},10,2,[172,173,176],{"id":54,"text":55},{"id":174,"text":175},"2400085","The button uses a combination of a border radius and and inset box shadow to achieve the top highlight, and for some reason Chrome doesn't seem to contain the box shadow within…",{"id":177,"text":178},"2400125","I'm still working out the kinks in the alternate Firefox implementation which was actually my first attempt at this effect.",{"commenters":180,"max_depth":181,"maker_replies":169,"first_comment_mins":182,"lifespan_hours":183},31,6,8,53,[185,187,191,193,195,197,201,204,206,207,210,212,214,216,217,220,222,225,227,231,235,239,243,246,248,251,252,253,257,260,261,263,264,266,267,270,273,275,278,281,283,285,288,290,291,294,297,301,304,306,307,309,312,315,316,320,322],[54,38,38,186,11,42],"maker\u002Fneutral\u002Fidea",[188,38,38,189,190,38],"2402029","other\u002Fneutral\u002Fperformance","edandersen",[106,38,42,192,107,38],"project\u002Fcritical\u002Fperformance",[86,42,31,194,87,38],"project\u002Fmixed\u002Fdesign",[174,42,38,196,11,42],"maker\u002Fneutral\u002Fdesign",[198,42,42,199,200,38],"2400151","project\u002Fcritical\u002Fexecution","runningdogx",[202,42,31,203,87,38],"2400377","project\u002Fneutral\u002Fexecution",[71,170,32,205,72,38],"project\u002Fpositive\u002Fdesign",[75,31,31,194,76,38],[208,31,31,209,72,38],"2400290","project\u002Fneutral\u002Fdesign",[148,18,31,211,149,38],"project\u002Fmixed\u002Fexecution",[177,18,38,213,11,42],"maker\u002Fneutral\u002Fexecution",[215,18,31,203,149,38],"2400145",[102,32,42,192,103,38],[218,32,38,219,72,38],"2400272","commenter\u002Fneutral\u002Fperformance",[221,32,38,219,103,38],"2400348",[223,32,38,224,87,38],"2400403","commenter\u002Fneutral\u002Fnone",[226,32,38,219,72,38],"2400408",[228,181,42,229,230,38],"2400274","project\u002Fcritical\u002Fdesign","melvinram",[232,181,38,233,234,38],"2400437","commenter\u002Fneutral\u002Fdesign","jat850",[236,181,38,237,238,38],"2400731","other\u002Fneutral\u002Fnone","radley",[240,33,31,241,242,38],"2400450","project\u002Fmixed\u002Fperformance","rhizome",[244,33,38,245,11,42],"2400486","maker\u002Fneutral\u002Fperformance",[247,33,42,192,242,38],"2400522",[249,33,42,192,250,38],"2402280","nitrogen",[117,182,31,194,118,38],[139,182,38,196,11,42],[254,255,42,229,256,38],"2400675",9,"kingsidharth",[258,255,31,209,259,38],"2400743","JeremyBanks",[95,255,42,229,96,38],[262,255,38,186,11,42],"2400977",[128,169,31,211,129,38],[265,169,38,186,11,42],"2400188",[132,169,42,199,129,38],[268,169,38,269,87,38],"2400392","commenter\u002Fneutral\u002Fidea",[271,169,38,272,129,38],"2400399","commenter\u002Fneutral\u002Fdocs",[274,169,38,269,87,38],"2400409",[276,169,38,272,277,38],"2401744","rberdeen",[279,169,42,199,280,38],"2400378","bretthopper",[282,169,38,213,11,42],"2400390",[79,284,32,205,80,38],11,[286,284,38,287,11,42],"2400148","maker\u002Fneutral\u002Fnone",[289,284,32,205,80,38],"2400232",[110,284,42,192,111,38],[292,284,31,293,80,38],"2400313","project\u002Fneutral\u002Fperformance",[295,284,31,241,296,38],"2400576","tmgrhm",[298,299,42,229,300,38],"2400435",12,"NY_USA_Hacker",[302,299,38,233,303,38],"2400493","natrius",[305,299,38,233,300,38],"2400536",[121,299,42,229,122,38],[308,299,38,233,300,38],"2400533",[310,299,38,224,311,38],"2400878","scoot",[313,299,38,233,314,38],"2401057","knowtheory",[142,299,38,196,11,42],[317,299,38,318,319,38],"2401497","other\u002Fneutral\u002Fdesign","biot",[321,299,38,318,300,38],"2401663",[160,323,42,324,161,38],13,"project\u002Fcritical\u002Fidea",[],[327,332,336,341,345,350],{"id":328,"name":329,"points":330,"category":331},"2406614","Gumroad",396,"web_saas",{"id":333,"name":334,"points":335,"category":331},"2404752","cantada.ca",212,{"id":337,"name":338,"points":339,"category":340},"2406256","jsgif",128,"languages",{"id":342,"name":343,"points":344,"category":331},"2417194","NationBuilder",109,{"id":346,"name":347,"points":348,"category":349},"2408399","SyncPad",59,"productivity",{"id":351,"name":352,"points":353,"category":331},"2414491","popify.me",45,false,"v2",{"id":357,"name":5,"line":6,"ai":354,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":358,"top":18,"kw":359,"maker":11,"domain":10,"tier":19,"attempts":38,"strip":360,"url":9,"mix":361,"praise":67,"objection":91,"sub":21},2399927,-0.38,[24,25,26,27],"0010153301000103113131310001503310010001",[31,32,33,34],1794036487479]